Topic: Accordion Collapse all for Mobile, All Open for Desktop

Author

Posts
November 2, 2014 at 9:37 am #136900

fmaweb
Participant

On our page http://annualmeeting.fmanet.org/become-a-sponsor/ They want the accordion
items all open for the website. For mobile however it would be better to have them all collapsed. Is the best method to do this to just duplicate the band and use a visibility tag?

November 2, 2014 at 8:19 pm #137071
Rad
Moderator
Hi there,

Thanks for posting in.

For now, leave them open, then add this code at your customizer’s custom javascript to close them on mobile.
```
jQuery(function($){ 

$(document).ready(function(){ 

$('html.touch .collapse').collapse('hide');

});

});
```
Cheers!
November 3, 2014 at 10:50 am #137564

fmaweb
Participant

Beautiful Thanks!

November 3, 2014 at 11:27 am #137602

Cousett
Member

Glad we were able to help. 🙂 Have a nice day.

November 4, 2014 at 9:51 am #138323

fmaweb
Participant

I notice now the mobile menu starts open. The code is affecting it as well. Can you help me target just the Accordion on the Become a sponsor page?

November 4, 2014 at 10:20 am #138363

fmaweb
Participant

Trying to figure the syntax out lol

jQuery(function($){

$(document).ready(function(){

$( “#sponsor-levels” ).(‘html.touch .collapse’).collapse(‘hide’);

});

});

November 4, 2014 at 11:06 am #138394

fmaweb
Participant

Got it.

jQuery(function($){

$(document).ready(function(){

$(‘html.touch #sponsor-levels .collapse’).collapse(‘hide’);

});

});

November 4, 2014 at 11:11 am #138402

Zeshan
Member

Glad to hear you were able to resolve it! 🙂 Have a good day!
Author

Posts

<script> jQuery(function($){ $("#no-reply-136900 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>