jquery | To make show() and hide() using divs

Question

I had a html code which i have to make divs show() and hide() as a list. I know how to make show() and hide() but i'm not familiar with html structure.

This is the my html code.

<!--contants:start-->
<div class="sub_contants">
<!--sub_title:start-->
<div class="titline"></div>
<h2>FAQ</h2>
<!--sub_title:end-->
<!--sub_contants:start-->
<div class="sub_border_faqbox"></div>
<div class="sub_border_faq_q">자주하는 질문?</div>
<div class="sub_border_faq_a">자주하는 질문?<br>답변<br>답변<br>답변<br>답변<br>답변</div>
<div class="sub_border_faq_q">자주하는 질문?</div>
<div class="sub_border_faq_a">자주하는 질문?<br>답변<br>답변<br>답변<br>답변<br>답변</div>
<div class="sub_border_faq_q">자주하는 질문?</div>
<div class="sub_border_faq_a">자주하는 질문?<br>답변<br>답변<br>답변<br>답변<br>답변</div>
<div class="sub_border_faq_q_select">자주하는 질문?</div>
<div class="sub_border_faq_a">자주하는 질문?<br>답변<br>답변<br>답변<br>답변<br>답변</div>
<div class="sub_border_faq_q">자주하는 질문?</div>
<div class="sub_border_faq_a">자주하는 질문?<br>답변<br>답변<br>답변<br>답변<br>답변</div>
<!--sub_contants:end-->
<div class="sub_bottom"></div>

<script language="javascript">
$(".sub_border_faq_a").hide();
$(".sub_border_faq_q").click(function(){
    $(this).addClass("sub_border_faq_q_select");
    $(".sub_border_faq_a").toggle();
});

The all divs are share the same classes because of the css so that all divs toggle at the same time. How can i make div toggle separately? Do i have to divide this structure? How can i fix this code?

---

$(".sub_border_faq_a").hide();
$(".sub_border_faq_q").click(function(){
$(this).next(".sub_border_faq_a").toggle(function() {
    $(this).prev(".sub_border_faq_q_select").addClass("sub_border_faq_q");
    $(this).prev(".sub_border_faq_q_select").removeClass("sub_border_faq_q_select");
}, function() {
    $(this).prev(".sub_border_faq_q").addClass("sub_border_faq_q_select");
    $(this).prev(".sub_border_faq_q_select").removeClass("sub_border_faq_q");
});

I want to addClass and removeClass to show div is selected or not but the addClass("sub_border_faq_q_select") and removeClass("sub_border_faq_q") work properly but the other side doesn't work. Did i do something wrong?

---

I fix the above code :-) and it works very well.

$(".sub_border_faq_q").click(function(){
    $(this).next(".sub_border_faq_a").toggle(function() {
        $(this).prev('.sub_border_faq_q').toggleClass( "sub_border_faq_q_select" );
    });
});

Answer 1

You want to toggle the next sibling answer of the clicked question so

$(".sub_border_faq_a").hide();
$(".sub_border_faq_q").click(function(){
    $(this).addClass("sub_border_faq_q_select");
    $(this).next(".sub_border_faq_a").toggle();
});