用于在jQuery手风琴上全部展开和折叠的按钮

Question

I have got a simple jQuery accordion, which requires a button at the top for 'expand/collapse all'.

I've got it working so far, except for when some items are already showing, and the button is clicked, the 'other' items expand/collapse - leaving the already open ones to do the opposite.

I need to find some sort of reset that will essentially close and re-open all items, and vice-versa.

See code below for accordion and collapse:

<script type="text/javascript">
(function($) {
    $(function() {
        $(".faq-accordion > div").accordion({ header: "h4", collapsible: true, active: false, speed: 10000, });
    })
})(jQuery);
</script>

<script>
$(document).ready(function() {
$('.show-all-applying').click(function() {
    $('.faq-accordion div div').slideToggle("fast");
});
});
</script>

Thank you!

Edit: Here is a JSFiddle showing everything as it is so far (with content changed)

The issues are that I need to:

1. Make the 'show all' button also hide everything once it is clicked for a second time.
2. The questions when clicked to close sometimes need to be clicked twice, and not sure why.

Answer 1

Dont use slideToggle() , use slideUp() instead ;)

SlideToggel will slide eveything that is up down and everything that is down up.

You want everything to slide up so use slideUp()

EDIT : I modified your jsfiddle, and got it working. When a user clicks the button 'show all' it will check what the text is. So in this case 'show all' and it will all slideDown. It then changes the text to 'hide all'. If the user clicks on 'hide all', it will all slideUp. If you use slideToggle in this case, it will work also BUT if a user clicks on a question title, and it opens and then clicks on the show all it will CLOSE the question title that was clicked on and open all the others!

WORKING FIDDLE