常见问题切换添加选择器

Question

I have toggle faq.

When I click on " + " it toogle answer and show/hide it.

I want to make toggle if I click on " + " and also on title of question.

Question:

How to toggle answer with h3 element (title of question) and/or * + * button ?

HTML:

<div class="box boxFaq clearfix">                  
    <div class="boxTitle">
        <h3>Question</h3>
    </div>
    <button class="clearfix">+</button>
    <div style="clear: both;"></div>
    <div class="boxContent clearfix toggle">                     
        Answer answer answer                                                                    
    </div>
</div>  

JS:

jQuery(document).ready(function() {
    jQuery('button').click(function() {
        jQuery(this).next().next('.toggle').slideToggle();
        if (jQuery(this).text() === '+') {
            jQuery(this).html('-');
        }
        else {
            jQuery(this).html('+');
        }
    });
});

Answer 1

add h3 to selector..and use parents() or closest()

 jQuery(document).ready(function() {
  jQuery('h3,button').click(function() {
     var $parent=jQuery(this).parents('.boxFaq');
    $parent.find('.toggle').slideToggle();
    if ($parent.find('button').text() === '+') {
        jQuery(this).html('-');
    }
    else{
        jQuery(this).html('+');
    }

   });
 });

Answer 2

 if (jQuery(this).text() === '+') {
            $('h3').text('Answer');  //Change the text here
            jQuery(this).html('-');  
        }
        else {
            jQuery(this).html('+');
            $('h3').text('Question');  //Again here
        }

Check this Fiddle

Answer 3

You can include multiple selectors by separating them with a , . Then you just need to slightly amend the logic of the handler to work for both elements. Try this:

jQuery('.boxFaq button, .boxFaq h3').click(function() {
    var $parent = jQuery(this).closest('.boxFaq');
    var $btn = $parent.find('button')
    $parent.find('.toggle').slideToggle();
    $btn.text($btn.text() === '+' ? '-' : '+');
});

Example fiddle

Note also I amended the +/- logic to a simple ternary expression.

Answer 4

Modify you HTML code

<div class="boxContent clearfix toggle" style="display: none;">                     
        Answer answer answer                                                                    
    </div>

Modify you jquery code

jQuery(document).ready(function() {
    jQuery('button').click(function() {
        jQuery(this).next().next().slideToggle();
        if (jQuery(this).text() === '+') {
            jQuery(this).html('-');
        }
        else {
            jQuery(this).html('+');
        }
    });
});

Check this updated fiddle