调整手风琴以处理多个实例

我使用的是带有collapse/hide-all选项的jQuery手风琴，它只适用于一个实例。一旦放入第二个（甚至更多）实例，脚本就会切换所有手风琴上的所有面板，因为它不知道应该区分不同的手风琴进行切换。有没有一种简单的方法可以让脚本识别切换按钮是在什么手风琴上使用的？可能是通过临时身份证？

HTML

<h2>First accordion</h2>
<div class="accordion">
    <a class="toggle_open" id="button_toggle">Toggle all</a>
    <h5>Which is the first question?</h5>
    <div class="accordion_text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima adipisci natus quas quod doloremque, dolore aliquid, blanditiis eligendi nemo cum tenetur earum. Suscipit ea enim consequuntur vero totam, impedit veritatis.</p>
    </div>
    <h5>What is the second question?</h5>
    <div class="accordion_text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima adipisci natus quas quod doloremque, dolore aliquid, blanditiis eligendi nemo cum tenetur earum. Suscipit ea enim consequuntur vero totam, impedit veritatis.</p>
    </div>
    <h5>And the third?</h5>
    <div class="accordion_text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima adipisci natus quas quod doloremque, dolore aliquid, blanditiis eligendi nemo cum tenetur earum. Suscipit ea enim consequuntur vero totam, impedit veritatis.</p>
    </div>
</div>
<h2>Second accordion</h2>
<div class="accordion">
    <a class="toggle_open" id="button_toggle">Toggle all</a>
    <h5>Which is another question?</h5>
    <div class="accordion_text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima adipisci natus quas quod doloremque, dolore aliquid, blanditiis eligendi nemo cum tenetur earum. Suscipit ea enim consequuntur vero totam, impedit veritatis.</p>
    </div>
    <h5>What is the next-to-another question?</h5>
    <div class="accordion_text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima adipisci natus quas quod doloremque, dolore aliquid, blanditiis eligendi nemo cum tenetur earum. Suscipit ea enim consequuntur vero totam, impedit veritatis.</p>
    </div>
    <h5>Tell me about the last!</h5>
    <div class="accordion_text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima adipisci natus quas quod doloremque, dolore aliquid, blanditiis eligendi nemo cum tenetur earum. Suscipit ea enim consequuntur vero totam, impedit veritatis.</p>
    </div>
</div>

CSS

.accordion {
  .accordion_text {
    display: none;
  }
}

JS

    jQuery('document').ready(function(){
    /* Accordion for pages */
    var headers = jQuery('.accordion h5');
    var contentAreas = jQuery('.accordion_text').hide();
    var expandLink = jQuery('.toggle_open');
    // add the accordion functionality
    headers.click(function() {
        var panel = jQuery(this).next();
        var isOpen = panel.is(':visible');
        // open or close as necessary
        panel[isOpen? 'slideUp': 'slideDown']()
            // trigger the correct custom event
            .trigger(isOpen? 'hide': 'show');
        // stop the link from causing a pagescroll
        return false;
    });
    // hook up the expand/collapse all
    expandLink.click(function(){
        var isAllOpen = jQuery(this).data('isAllOpen');
        contentAreas[isAllOpen? 'hide': 'show']()
            .trigger(isAllOpen? 'hide': 'show');
    });
    // when panels open or close, check to see if they're all open
    contentAreas.on({
        // whenever we open a panel, check to see if they're all open
        // if all open, swap the button to collapser
        show: function(){
            var isAllOpen = !contentAreas.is(':hidden');   
            if(isAllOpen){
                expandLink.text('Hide all')
                    .data('isAllOpen', true);
            }
        },
        // whenever we close a panel, check to see if they're all open
        // if not all open, swap the button to expander
        hide: function(){
            var isAllOpen = !contentAreas.is(':hidden');
            if(!isAllOpen){
                expandLink.text('Collapse all')
                .data('isAllOpen', false);
            } 
        }
    });
}); 

您可以在上找到此代码示例http://codepen.io/enoversum/pen/EKQmeL