このテーマに関する投稿がたくさんあることは知っていますが、HTMLマークアップのためにカスタムアコーディオンを作成しました。以下は私のJQueryです。
$(function(){
hide(0);
$('.accordion > h1').click(function(){
hide($('.accordion').index($(this).parent()));
});
function hide(i){
$('.accordion').removeClass('active');
$('.accordion:eq(' + i + ')').addClass('active');
}
});
これがアコーディオンの私のHTMLです。私はExpressionEngineCMSを使用していることに注意してください。
<section class="module flag-{style} {page_module_style}">
<h1 id="row-id{row_id}">{header}</h1>
<div class="copy">
{copy}
</div>
</section>
私はCSSを使用してアコーディオンの外観を与えています。リンクはhttp://siteurl.com/page#row-id1234になります。特定のアコーディオンタブを、そのタブが開いてフォーカスするIDでリンクすると、どこにリンクするかを理解する必要があります。