Menu icon Foundation
Accordion with embedded forms

I have an accordion inside one of two tabs. The tabs use deep linking. The accordion has 5 accordion items. Each accordion item contains a separate form. I'd like each form's accordion item to reopen upon its form submittal.

Originally, the first item contained the 'is-active' class but my troubleshooting now involves without. Results are the same. Form is submitted OK but the form's accordion item is not reopened.

For brevity, my accordion looks like:

 

<ul id="build-accordion" class="accordion" data-accordion data-allow-all-closed="true">
    <li class="accordion-item" data-accordion-item>
       <a href="#" class="accordion-title">Basic Info</a>
       <div class="accordion-content" id="basic_section" data-tab-content>
           <form></form>
       </div>
    </li>
    <li class="accordion-item" data-accordion-item>
       <div class="accordion-content" id="education_section" data-tab-content>
           <form method="POST" id="education-form" ACTION="controller/method#build">
              <input name="submit_ed" type="submit" value=" Submit Education Info ">
           </form>
       </div>
    </li>
</ul>

As shown, my app.js file has been tested with the following but none work: 

 

$('#education-form').submit(function() {
	$('#build-accordion').foundation('down',$('#education-section'));
/*	$('#build-accordion').foundation('toggle',$('#education-section'));
	$('#education-section').parent().parent().foundation('toggle',$('#education-section'));*/
});

Can anyone shed light on a solution? Thank you in advance!

Ken

accordionformsjquery

I have an accordion inside one of two tabs. The tabs use deep linking. The accordion has 5 accordion items. Each accordion item contains a separate form. I'd like each form's accordion item to reopen upon its form submittal.

Originally, the first item contained the 'is-active' class but my troubleshooting now involves without. Results are the same. Form is submitted OK but the form's accordion item is not reopened.

For brevity, my accordion looks like:

 

<ul id="build-accordion" class="accordion" data-accordion data-allow-all-closed="true">
    <li class="accordion-item" data-accordion-item>
       <a href="#" class="accordion-title">Basic Info</a>
       <div class="accordion-content" id="basic_section" data-tab-content>
           <form></form>
       </div>
    </li>
    <li class="accordion-item" data-accordion-item>
       <div class="accordion-content" id="education_section" data-tab-content>
           <form method="POST" id="education-form" ACTION="controller/method#build">
              <input name="submit_ed" type="submit" value=" Submit Education Info ">
           </form>
       </div>
    </li>
</ul>

As shown, my app.js file has been tested with the following but none work: 

 

$('#education-form').submit(function() {
	$('#build-accordion').foundation('down',$('#education-section'));
/*	$('#build-accordion').foundation('toggle',$('#education-section'));
	$('#education-section').parent().parent().foundation('toggle',$('#education-section'));*/
});

Can anyone shed light on a solution? Thank you in advance!

Ken

Top10to 4 months ago

Thank you for sharing useful information!

Gonzalo Huiragin 4 months ago

i will test again in next times, thank you share for everyone. giay the thao tphcm