CODEWITHSUNDEEP
zurb-foundation-5
Todd
Todd

Reputation: 1

foundation 5 accordion exposed content

I am trying to use the below foundation5 code. The problem is the content is exposed on load. I need it to be hidden until clicked on. I have been able to hide it but then it will not expand. Any suggestion would be greatly appreciated.

Thank you

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

Upvotes: 0

Views: 34

Answers (1)

Tim
Tim

Reputation: 2163

As per the Foundation docs, the the class active is used to display the corresponding content. So if you don't want your content to be displayed when the page loads, remove the class active. Additionally, make sure to keep your HTML markup clean. I see a lot of and invalid markup like unclosed tags in the example you provided. Your final markup should look like this:

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

Upvotes: 1

Related Questions