I am using jquery to make a screen of questions and answers. I hope to click to open a question to close other questions! But there is a requirement that the first question should be opened first when entering the default screen, but I don’t know how to do it now. How to rewrite this program, I hope you can help me, thank you.
$(".sub_title_wrapper").on("click", function() {
$(this).find(".open").toggleClass("active");
$(this).parent().find(".sub_content").slideToggle();
$(this).parent().find(".sub_content").toggleClass("active");
$(this).parent().siblings().find(".sub_content").toggleClass("active");
$(this).parent().siblings().find(".sub_content").slideUp();
$(this).parent().siblings().find(".open").removeClass("active");
});.content_list .list_item {
border-bottom: 1px solid #222;
}
.content_list .list_item .sub_title_wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 16px;
}
.content_list .list_item .sub_title_wrapper .open {
width: 16px;
height: 16px;
background-size: cover;
background-repeat: no-repeat;
transition: 0.5s;
transform: rotate(180deg);
}
.content_list .list_item .sub_title_wrapper .open.active {
transform: rotate(0deg);
color: #222;
}
.content_list .list_item .sub_title_wrapper .sub_title {
cursor: pointer;
font-size: 15px;
color: #222;
}
.content_list .list_item .sub_title_wrapper .sub_title .symbol {
display: none;
}
.content_list .list_item .sub_title_wrapper .sub_title.active {
color: #000;
}
.content_list .list_item .sub_content {
display: none;
padding: 20px 16px;
}
.content_list .list_item .sub_content h4 {
line-height: 1.5;
font-weight: 700;
margin-bottom: 8px;
}
.content_list .list_item .sub_content li {
font-size: 15px;
line-height: 1.5;
}
.content_list .list_item .sub_content.active {
color: #222;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="content_list" style="display:block;">
<li class="list_item">
<div class="sub_title_wrapper">
<h4 class="sub_title"><span class="symbol">•</span>Title</h4>
<button class="open">V</button>
</div>
<ul class="sub_content">
<li>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nemo voluptates provident accusamus hic, sapiente, omnis quidem placeat asperiores dolorem esse iusto eius, dignissimos quam repellat ad. Eveniet, rem sapiente!
</li>
</ul>
</li>
<li class="list_item">
<div class="sub_title_wrapper">
<h4 class="sub_title"><span class="symbol">•</span>Title</h4>
<button class="open">V</button>
</div>
<ul class="sub_content">
<li>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nemo voluptates provident accusamus hic, sapiente, omnis quidem placeat asperiores dolorem esse iusto eius, dignissimos quam repellat ad. Eveniet, rem sapiente!
</li>
</ul>
</li>
<li class="list_item">
<div class="sub_title_wrapper">
<h4 class="sub_title"><span class="symbol">•</span>Title</h4>
<button class="open">V</button>
</div>
<ul class="sub_content">
<li>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nemo voluptates provident accusamus hic, sapiente, omnis quidem placeat asperiores dolorem esse iusto eius, dignissimos quam repellat ad. Eveniet, rem sapiente!
</li>
</ul>
</li>
<li class="list_item">
<div class="sub_title_wrapper">
<h4 class="sub_title"><span class="symbol">•</span>Title</h4>
<button class="open">V</button>
</div>
<ul class="sub_content">
<li>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nemo voluptates provident accusamus hic, sapiente, omnis quidem placeat asperiores dolorem esse iusto eius, dignissimos quam repellat ad. Eveniet, rem sapiente!
</li>
</ul>
</li>
<li class="list_item">
<div class="sub_title_wrapper">
<h4 class="sub_title"><span class="symbol">•</span>Title</h4>
<button class="open">V</button>
</div>
<ul class="sub_content">
<li>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nemo voluptates provident accusamus hic, sapiente, omnis quidem placeat asperiores dolorem esse iusto eius, dignissimos quam repellat ad. Eveniet, rem sapiente!
</li>
</ul>
</li>
</ul>
2
Answers
Add this outside of your event listener:
This will ensure the first accordion & button icon is open on page load.
When you generate your HTML, you can add the required classes/styles that your click function would add, ie:
Then your HTML will be rendered already open and you won’t get a FOUC caused by a js solution.
Updated snippet: