1
私は、1つのインスタンスでうまく動作するjQueryアコーディオンをcollapse/hide allオプションで使用しています。 2番目（またはそれ以上）のインスタンスが挿入されるとすぐに、スクリプトはすべてのアコーディオンのパネルをトグルします。どのアコーディオンでトグルボタンが使用されているかをスクリプトが認識できるようにする簡単な方法はありますか？おそらく一時的なIDによってですか？複数のインスタンスで動作するようにアコーディオンを調整する
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);
}
}
});
});
あなたはで、このコードの例を見つけることができます