Foundation 6 Accordion not opening

Question

I'm having issues getting a Foundation 6 accordion section to open properly when generated by JavaScript. I looked through similar questions, but none of their answers seemed to help.

I've created a codepen with an HTML version of the accordion I'm trying to make, as well as a button that will cause the Javascript to generate what should be an exact copy of that same html. The HTML-built version works as expected, but the Javascript-built version will not expand when clicked.

Is there an extra step needed to get the accordions to function when generated by Javascript (such as an event handler)?

https://codepen.io/douglastaylor/pen/qXroev

Here's the HTML:

<h4>This is built into the HTML</h4>

<ul class="accordion accordion-client" id="accordionResults" role="tablist" data-accordion data-allow-all-closed="true"> 

<li class="accordion-item" data-accordion-item> 

<a href="#acc1" id="acc1_label" role="tab" aria-controls="acc1" class="accordion-title">Accordion 1</a>

<div id="acc1" role="tabpanel" aria-labelledby="acc1_label" class="accordion-content" data-tab-content>

<ul class="accordion show-for-small accordion-details" id="acc1_container" role="tablist" data-accordion data-allow-all-closed="true">

<li class="accordion-item" data-accordion-item> 

<a href="#acc1_details" id="acc1_details_label" role="tab" aria-controls="acc1_details" class="accordion-title">Details</a> 

<div id="acc1_details" role="tabpanel" class="accordion-content" aria-labelledby="acc1_details_label" data-tab-content> 

Text inside sub accordion 1

</div>

</li>

<li class="accordion-item" data-accordion-item> 

<a href="#acc1_features" id="acc1_features_label" aria-controls="acc1_features" role="tab" class="accordion-title">Features</a> 

<div id="acc1_features" role="tabpanel" class="accordion-content" aria-labelledby="acc1_features_label" data-tab-content>

Text inside sub accordion 2

</div>

</li>

<li class="accordion-item" data-accordion-item> 

<a href="#acc1_statistics" id="acc1_statistics_label" aria-controls="acc1_statistics" role="tab" class="accordion-title">Statistics</a> 

<div id="acc1_statistics" role="tabpanel" class="accordion-content" aria-labelledby="acc1_statistics_label" data-tab-content> 

Text inside sub accordion 3

</div>

</li>

</ul>

</div> 

</li> 

<li class="accordion-item" data-accordion-item> 

<a href="#acc2" id="acc2_label" role="tab" aria-controls="acc2" class="accordion-title">Accordion 2</a>

<div id="acc2" role="tabpanel" aria-labelledby="acc2_label" class="accordion-content" data-tab-content>

<ul class="accordion show-for-small accordion-details" id="acc2_container" role="tablist" data-accordion data-allow-all-closed="true">

<li class="accordion-item" data-accordion-item> 

<a href="#acc2_details" id="acc2_details_label" role="tab" aria-controls="acc2_details" class="accordion-title">Details</a> 

<div id="acc2_details" role="tabpanel" class="accordion-content" aria-labelledby="acc2_details_label" data-tab-content> 

Text inside sub accordion 1

</div>

</li>

<li class="accordion-item" data-accordion-item> 

<a href="#acc2_features" id="acc2_features_label" aria-controls="acc2_features" role="tab" class="accordion-title">Features</a> 

<div id="acc2_features" role="tabpanel" class="accordion-content" aria-labelledby="acc2_features_label" data-tab-content>

Text inside sub accordion 2

</div>

</li>

<li class="accordion-item" data-accordion-item> 

<a href="#acc2_statistics" id="acc2_statistics_label" aria-controls="acc2_statistics" role="tab" class="accordion-title">Statistics</a> 

<div id="acc2_statistics" role="tabpanel" class="accordion-content" aria-labelledby="acc2_statistics_label" data-tab-content> 

Text inside sub accordion 3

</div>

</li>

</ul>

</div> 

</li> 

</ul>

<h4>This is generated by Javascript</h4>

<div id="content"></div>    

And here's the Javascript:

$(document).foundation();

var html = '';

html += '<ul class="accordion accordion-client" id="accordionResults" role="tablist" data-accordion data-allow-all-closed="true"> ';

html += '<li class="accordion-item" data-accordion-item> ';

html += '<a href="#acc1" id="acc1_label" role="tab" aria-controls="acc1" class="accordion-title">Accordion 1</a>';

html += '<div id="acc1" role="tabpanel" aria-labelledby="acc1_label" class="accordion-content" data-tab-content>';

html += '<ul class="accordion show-for-small accordion-details" id="acc1_container" role="tablist" data-accordion data-allow-all-closed="true">';

html += '<li class="accordion-item" data-accordion-item> ';

html += '<a href="#acc1_details" id="acc1_details_label" role="tab" aria-controls="acc1_details" class="accordion-title">Details</a> ';

html += '<div id="acc1_details" role="tabpanel" class="accordion-content" aria-labelledby="acc1_details_label" data-tab-content> ';

html += 'Text inside sub accordion 1';

html += '</div>';

html += '</li>';

html += '<li class="accordion-item" data-accordion-item> ';

html += '<a href="#acc1_features" id="acc1_features_label" aria-controls="acc1_features" role="tab" class="accordion-title">Features</a> ';

html += '<div id="acc1_features" role="tabpanel" class="accordion-content" aria-labelledby="acc1_features_label" data-tab-content>';

html += 'Text inside sub accordion 2';

html += '</div>';

html += '</li>';

html += '<li class="accordion-item" data-accordion-item> ';

html += '<a href="#acc1_statistics" id="acc1_statistics_label" aria-controls="acc1_statistics" role="tab" class="accordion-title">Statistics</a> ';

html += '<div id="acc1_statistics" role="tabpanel" class="accordion-content" aria-labelledby="acc1_statistics_label" data-tab-content> ';

html += 'Text inside sub accordion 3';

html += '</div>';

html += '</li>';

html += '</ul>';

html += '</div> ';

html += '</li> ';

html += '<li class="accordion-item" data-accordion-item> ';

html += '<a href="#acc2" id="acc2_label" role="tab" aria-controls="acc2" class="accordion-title">Accordion 2</a>';

html += '<div id="acc2" role="tabpanel" aria-labelledby="acc2_label" class="accordion-content" data-tab-content>';

html += '<ul class="accordion show-for-small accordion-details" id="acc2_container" role="tablist" data-accordion data-allow-all-closed="true">';

html += '<li class="accordion-item" data-accordion-item> ';

html += '<a href="#acc2_details" id="acc2_details_label" role="tab" aria-controls="acc2_details" class="accordion-title">Details</a> ';

html += '<div id="acc2_details" role="tabpanel" class="accordion-content" aria-labelledby="acc2_details_label" data-tab-content> ';

html += 'Text inside sub accordion 1';

html += '</div>';

html += '</li>';

html += '<li class="accordion-item" data-accordion-item> ';

html += '<a href="#acc2_features" id="acc2_features_label" aria-controls="acc2_features" role="tab" class="accordion-title">Features</a> ';

html += '<div id="acc2_features" role="tabpanel" class="accordion-content" aria-labelledby="acc2_features_label" data-tab-content>';

html += 'Text inside sub accordion 2';

html += '</div>';

html += '</li>';

html += '<li class="accordion-item" data-accordion-item> ';

html += '<a href="#acc2_statistics" id="acc2_statistics_label" aria-controls="acc2_statistics" role="tab" class="accordion-title">Statistics</a> ';

html += '<div id="acc2_statistics" role="tabpanel" class="accordion-content" aria-labelledby="acc2_statistics_label" data-tab-content> ';

html += 'Text inside sub accordion 3';

html += '</div>';

html += '</li>';

html += '</ul>';

html += '</div> ';

html += '</li> ';

html += '</ul>';

$('#content').html(html);

Answer 1

The problem is that foundation is running before your js code inserts the html..

add the foundation instance after your js..

$('#content').html(html);
$(document).foundation();

Codepen