CODEWITHSUNDEEP
javascriptjquerycsshtmlzurb-foundation
Akshay27nmh
Akshay27nmh

Reputation: 43

Accordion not working in Foundation

I'm trying to format an accordion in Foundation (Version 5.5.0), but it's just display the titles of each section without any way of getting to the content below. What am I doing wrong? My html is below:

Html

<div class="section-container accordion" data-section="accordion">
    <section class="active">
        <p class="title" data-section-title><a href="#">Section 1</a>
        </p>
        <div class="content" data-section-content>
            <p>Content of section 1.</p>
        </div>
    </section>
    <section>
        <p class="title" data-section-title><a href="#">Section 2</a>
        </p>
        <div class="content" data-section-content>
            <p>Content of section 2.</p>
        </div>
    </section>
</div>

Javascript

$(document).foundation();

Example

Upvotes: 0

Views: 5055

Answers (2)

empiric
empiric

Reputation: 7878

It took my a while to figure it out but I get the example to work:

The Section-Example you posted seems to be only working with Foundation on Version 4.x.

See this example. (Note the external resources I use)

In Version > 4 of Foundation there is a accordion-functionality:

HTML

<ul class="accordion" data-accordion>
  <li class="accordion-navigation">
      <a href="#panel1a">Accordion 1</a>
       <div id="panel1a" class="content active">...</div>
  </li>
//and so on   
</ul>

Javascript

$(document).ready(function(){
    $(document).foundation();
});

Demo

P.S. I used this site for getting the different versions of foundation

Upvotes: 2

Mr.Mecanik
Mr.Mecanik

Reputation: 15

<div class="section-container accordion">
  <p class="title">
    <a href="#">Section 1</a>
  </p>
  <div class="content">
    <p>
      Content of section 1.
    </p>
  </div>
  <p class="title">
    <a href="#">Section 2</a>
  </p>
  <div class="content">
    <p>
      Content of section 2.
    </p>
  </div>
</div>

You should really be carefull with formatting.

Upvotes: 0

Related Questions