/ /基礎5アコーディオン露出コンテンツ - zurb-foundation-5

ファンデーション5アコーディオン露出コンテンツ - zurb-foundation-5

私は下のfoundation5コードを使用しようとしています。 問題は、コンテンツが負荷で公開されていることです。私はそれがクリックされるまで隠される必要がある。私はそれを隠すことができましたが、それは拡大しません。どんな提案も大歓迎です。

ありがとうございました

<div class="row">
<div class="large-12 columns">
<dl class="accordion" data-accordion>
<dd class="accordion-navigation">
<a href="#panel1b">XXXXXXXXS</a>
<div id="panel1b" class="content active">
Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</dd>
</dl>

回答:

回答№1は1

毎回 Foundationドキュメント、クラス active 対応するコンテンツを表示するために使用されます。したがって、ページが読み込まれたときにコンテンツを表示したくない場合は、そのクラスを削除してください active。また、HTMLマークアップをきれいに保つようにしてください。あなたが提供した例では、閉じられていないタグのようなたくさんの無効なマークアップがあります。最終的なマークアップは次のようになります。

<div class="row">
<div class="large-12 columns">
<dl class="accordion" data-accordion>
<dd class="accordion-navigation">
<a href="#panel1b">XXXXXXXXS</a>
<div id="panel1b" class="content">Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</dd>
</dl>
</div>
</div>