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 about 1 month ago

Thank you for sharing useful information!

Gonzalo Huiragin about 1 month ago

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

Anna 11 days ago

This article is useful for know about the root security of the containers. I got the knowledge of working of containers with the root behavior with the kernel.

play run 3