नींव 5 accordion खुला सामग्री - zurb-foundation-5

मैं नीचे नींव 5 कोड का उपयोग करने की कोशिश कर रहा हूँ। समस्या यह है कि सामग्री लोड पर उजागर होती है। मुझे इसे क्लिक करने तक छिपाने की ज़रूरत है। मैं इसे छिपाने में सक्षम हूं लेकिन फिर यह विस्तार नहीं करेगा। किसी भी सुझाव की सराहना की जाएगी।

धन्यवाद

<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

के अनुसार फाउंडेशन दस्तावेज़, कक्षा active इसी सामग्री को प्रदर्शित करने के लिए प्रयोग किया जाता है। इसलिए यदि आप पेज लोड होने पर अपनी सामग्री को प्रदर्शित नहीं करना चाहते हैं, तो कक्षा को हटा दें active। इसके अतिरिक्त, अपने एचटीएमएल मार्कअप को साफ रखना सुनिश्चित करें। मैं आपके द्वारा प्रदत्त उदाहरण में अनलॉक टैग की तरह बहुत सारे और अमान्य मार्कअप देखता हूं। आपका अंतिम मार्कअप इस तरह दिखना चाहिए:

<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>