1 つのアコーディオンが常に開いているときに機能する JavaScript アコーディオンを作成しました。アコーディオンを再度クリックしたときにも閉じることができるようにコードを変更する方法を考えていました。
$('.accordion-bottom').hide();
$('.accordion-link').on('click', global.toggleAccordian);
};
global.toggleAccordian = function(e){
var $Arrow = $(this).find('.arrow');
var $parentDiv = $(this).parent();
var $bottomAccordion = $parentDiv.siblings('.accordion-bottom');
var $accordionLi = $parentDiv.parents().eq('1');
var $siblingLis = $accordionLi.siblings('li');
var $siblingBotAccordions = $siblingLis.find('.accordion-bottom');
var $siblingArrows = $siblingLis.find('.arrow');
$siblingArrows.addClass('arrow-down');
if (!$accordionLi.hasClass('active')){
$bottomAccordion.slideDown('slow');
$Arrow.removeClass('arrow-down');
$siblingBotAccordions.stop().slideUp('slow');
}
e.preventDefault();
return false;
}
html:
<ul class="accordion">
<li>
<div class="item-inner-padding accordion-item">
<div class="accordion-top">
<a href="#" class="accordion-link">Title<span class="arrow arrow-down">Down</span></a>
</div>
<div class="accordion-bottom">
</div>
</div>
</li>
</ul>