It depends on what kind of question you have. Here are a few suggestions
In general, it's a good idea to start by doing some research on your own to see if you can find the answer to your question online or through other resources.
/**Typeo CSS Start (Note if is not need so remove)**/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
color: #000;
box-sizing: border-box;
background-color: #f6f4fe;
margin: 0px;
}
.cw-fix {
max-width: 1200px !important;
margin: auto;
width: 100%;
padding: 40px 15px;
}
/**Typeo CSS End (Note if is not need so remove)**/
.cw-section {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.cw-section .faq-contprt {
width: 55%;
background-color: #fff;
padding: 20px;
}
.cw-section .faq-img {
width: 45%;
}
.cw-section .faq-img img {
display: block;
object-fit: cover;
height: 100%;
max-width: 100%;
width: 100%;
}
.cw-accordion {
margin-top: 20px;
width: calc(100% - 40px);
display: flex;
flex-direction: column;
align-items: center;
row-gap: 1rem;
counter-reset: analysis;
border-left: #e3e3e3 2px dashed;
margin-left: 40px;
}
.cw-accordion__item {
width: 100%;
margin: 8px 0;
}
.cw-accordion__item:first-child {
margin-top: 0px;
}
.cw-accordion__item p:first-child {
margin-top: 0px;
}
.cw-acordion-cont p {
margin-bottom: 0px;
}
.cw-accordion .cw-label {
position: relative;
padding-left: 40px;
font-weight: 500;
font-size: 18px;
padding-top: 10px;
display: inline-block;
width: 100%;
cursor: pointer;
}
.cw-accordion .cw-label:before {
counter-increment: analysis;
content: counter(analysis);
width: 46px;
height: 46px;
border-radius: 100%;
display: inline-block;
border: #e3e3e3 1px solid;
font-size: 16px;
font-weight: 600;
color: #ff5e14;
text-align: center;
line-height: 48px;
position: absolute;
left: -26px;
top: 0px;
background-color: #fff;
}
.cw-acordion-cont {
padding-left: 42px;
overflow: hidden;
height: 0px;
transition: 0.5s all;
font-size: 16px;
}
.cw-acordion-cont p:first-child {
margin: 0px;
}
.cw-accordion .cw-open + .cw-acordion-cont {
height: auto;
overflow: auto;
padding-top: 15px;
padding-bottom: 5px;
}
@media(max-width:992px) {
.cw-section .faq-contprt {
width: 100%;
padding: 30px 0px;
}
.cw-section .faq-img {
width: 100%;
}
.cw-accordion {
margin-top: 10px;
width: calc(100% - 25px);
margin-left: 25px;
padding-right: 15px;
}
.cw-accordion__item {
margin-top: 8px;
}
.cw-accordion .cw-label:before {
width: 34px;
height: 34px;
font-size: 12px;
line-height: 33px;
left: -19px;
}
.cw-accordion .cw-label {
padding-left: 30px;
font-size: 14px;
padding-top: 6px;
}
.cw-acordion-cont {
padding-left: 30px;
font-size: 13px;
}
}
let items = document.querySelectorAll(".cw-accordion .cw-accordion__item .cw-label");
document.querySelector(".cw-accordion .cw-accordion__item .cw-label").classList.add('cw-open');
items.forEach(function (t) {
t.addEventListener("click", function (e) {
items.forEach(function (e) {
e !== t || e.classList.contains("cw-open")
? e.classList.remove("cw-open")
: e.classList.add("cw-open");
});
});
});