Menu icon Foundation
Nested Accordion in Block grid...possible?

I'm trying to get the accordion functionality to work within a two column block grid. My HTML looks something like this:

<ul class="small-block-grid-2 accordion" data-accordion>
    <li>
        <a href="#panel1">Accordion 1</a>
        <div id="panel1" 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>
    </li>
    <li>
        <a href="#panel2">Accordion 2</a>
        <div id="panel2" class="content">
          Panel 2. 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>
    </li>
</ul>
            

         

The grid works and the accordion panels are initially hidden as they should. However, when you click on the accordion links, nothing happens.

You can take a look at an example I set up on JSFiddle here: http://jsfiddle.net/6UdEb/. Any help would be greatly appreciated!

Foundationaccordionblock grid

I'm trying to get the accordion functionality to work within a two column block grid. My HTML looks something like this:

<ul class="small-block-grid-2 accordion" data-accordion>
    <li>
        <a href="#panel1">Accordion 1</a>
        <div id="panel1" 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>
    </li>
    <li>
        <a href="#panel2">Accordion 2</a>
        <div id="panel2" class="content">
          Panel 2. 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>
    </li>
</ul>
            

         

The grid works and the accordion panels are initially hidden as they should. However, when you click on the accordion links, nothing happens.

You can take a look at an example I set up on JSFiddle here: http://jsfiddle.net/6UdEb/. Any help would be greatly appreciated!

Adam D over 5 years ago

Anyone? :(