Menu icon Foundation
DropDown Autoclose Question

I'm using the Dropdown plugin to reveal a simple subscribe form on click (the form code is below), with Autoclose set to false so users can interact with the input field.

I'd like the Dropdown to close when the user clicks the form subscribe button or the list items at the bottom of the form. Is this possible using the plugin, or does it require custom JQuery?

<div class="medium-4 columns show-for-medium-up">
<a data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" class="subscribe"><p><strong>LETS CONNECT</strong><span class="typcn typcn-arrow-maximise"></span></p></a>
	<form id="drop1" class="f-dropdown subscribe" data-dropdown-content aria-hidden="true" aria-autoclose="false" tabindex="-1">
	<div class="row collapse">
	  <div class="small-7 columns subscribeInput">
		<input type="text" aria-controls="drop1" placeholder=".: EMAIL :." />
	  </div>
	  <div class="small-5 columns subscribeInput">
		<a href="#" class="button">Send It</a>
	  </div>
	  <hr>
	  <ul class="transition inline-list">
        <li><a class="transition" href="#" target="_blank"><span class="typcn typcn-rss"></span></a></li>
        <li><a href="#" target="_blank"><span class="typcn typcn-social-facebook"></span></a></li>
        <li><a href="#" target="_blank"><span class="typcn typcn-social-twitter"></span></a></li>
        <li><a href="#" target="_blank"><span class="typcn typcn-social-linkedin"></span></a></li>
        <li><a href="#" target="_blank"><span class="typcn typcn-social-google-plus"></span></a></li>
      </ul>
	</div>
  </form>
</div>
            

         

dropdownautoclose

I'm using the Dropdown plugin to reveal a simple subscribe form on click (the form code is below), with Autoclose set to false so users can interact with the input field.

I'd like the Dropdown to close when the user clicks the form subscribe button or the list items at the bottom of the form. Is this possible using the plugin, or does it require custom JQuery?

<div class="medium-4 columns show-for-medium-up">
<a data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" class="subscribe"><p><strong>LETS CONNECT</strong><span class="typcn typcn-arrow-maximise"></span></p></a>
	<form id="drop1" class="f-dropdown subscribe" data-dropdown-content aria-hidden="true" aria-autoclose="false" tabindex="-1">
	<div class="row collapse">
	  <div class="small-7 columns subscribeInput">
		<input type="text" aria-controls="drop1" placeholder=".: EMAIL :." />
	  </div>
	  <div class="small-5 columns subscribeInput">
		<a href="#" class="button">Send It</a>
	  </div>
	  <hr>
	  <ul class="transition inline-list">
        <li><a class="transition" href="#" target="_blank"><span class="typcn typcn-rss"></span></a></li>
        <li><a href="#" target="_blank"><span class="typcn typcn-social-facebook"></span></a></li>
        <li><a href="#" target="_blank"><span class="typcn typcn-social-twitter"></span></a></li>
        <li><a href="#" target="_blank"><span class="typcn typcn-social-linkedin"></span></a></li>
        <li><a href="#" target="_blank"><span class="typcn typcn-social-google-plus"></span></a></li>
      </ul>
	</div>
  </form>
</div>
            

         

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

You'll need some jQuery to trigger a close on submit:

something like this will get you closer:

 $('.f-dropdown').click(function() {
    if ($(this).hasClass('open')) {
         $('span[data-dropdown="'+$(this).attr('id')+'"]').trigger('click');
     }
});

Wesley Picotte over 4 years ago

Thanks - I'll play with this.