Docs

[chrispaynterdeepend]

Hi, I’m trying to make a mobile site where buttons control which section of content is displayed.

I have found javascript on the Themeco forum that allows a button to show/hide a section when clicked, however I can’t find info on how to setup button clicks to open one section and close all other visible sections.

My problem at the moment is that if I click all four buttons on the page, all 4 sections remain open. I only want to ever display 1 section of content (other than the header and buttons).

I have made a demo of what I’m trying to do here: http://care4.org.au/testmobile/ . Password is ‘duncan’.

Thank you in advance!

[Rupok]

Hey there,

Thanks for writing in! Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[chrispaynterdeepend]

Hi, I am following instructions from the forum in this thread:

https://community.theme.co/forums/topic/collapsible-complete-section-accordion-style-javascript-jquery-trouble/

The only code not discussed is something to ‘roll up’ all visible sections when a button is pushed. Can you advise if there is relatively simple JS that could be added to perform this task?

[Lely]

Hi There,

Would you mind providing us with login credentials so we can take a closer look on your current custom javacript? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[chrispaynterdeepend]

This reply has been marked as private.

[Lely]

Hi There,

Please update your javascript code to this:

jQuery(document).ready(function($){
	// 1. On load quickly grab the natural height of the section
	var sectionExpandableHeight = $('#triggersection1.x-section.rolldown').height();
	// 2. Then set it to be small like 10px height
	$('#triggersection1.x-section.rolldown').css('height','10px');
	// 3. Give the button a class to identify the section's closed state
	$('#triggerbutton1').addClass('closed');
	// 4. When the button is clicked...
	$('#triggerbutton1.closed').click(function(){

    
    // Close other  open section
    $(".rolldown:not(#triggersection1)").each(function( index ) {
      if($(this).css('display') == 'block'){
  	     $(this).slideToggle(500);
	   	}
    });
    
 
		// 5. Animate the expansion of the section
    $('#triggersection1.x-section.rolldown').animate({height: sectionExpandableHeight}, 500, function () {
			// 6. Upon completion set the height back to auto to accomodate anything dynamic inside
			$(this).css('height','auto');
		});
    
		// 7. Give the button the right state by removing closed and adding open
		$('#triggerbutton1').removeClass('closed');
		$('#triggerbutton1').addClass('open');
		return false;
	});
  
  
  
});
// 8. Now for the section to roll back up
jQuery(document).ready(function($){
	$('#triggersection1.rolldown').slideToggle(0);
     $('#triggerbutton1').on('touchend click', function(){
       $('#triggersection1.rolldown').slideToggle( "slow" );
    });
});
jQuery(document).ready(function($){
	// 1. On load quickly grab the natural height of the section
	var sectionExpandableHeight = $('#triggersection2.x-section.rolldown').height();
	// 2. Then set it to be small like 10px height
	$('#triggersection2.x-section.rolldown').css('height','10px');
	// 3. Give the button a class to identify the section's closed state
	$('#triggerbutton2').addClass('closed');
	// 4. When the button is clicked...
	$('#triggerbutton2.closed').click(function(){

          
     // Close other  open section
    $(".rolldown:not(#triggersection2)").each(function( index ) {
      if($(this).css('display') == 'block'){
  	     $(this).slideToggle(500);
	   	}
    });

		// 5. Animate the expansion of the section
		$('#triggersection2.x-section.rolldown').animate({height: sectionExpandableHeight}, 500, function () {
     
      // 6. Upon completion set the height back to auto to accomodate anything dynamic inside
			$(this).css('height','auto');
		});
		// 7. Give the button the right state by removing closed and adding open
		$('#triggerbutton2').removeClass('closed');
		$('#triggerbutton2').addClass('open');
		return false;
	});
});
jQuery(document).ready(function($){
	$('#triggersection2.rolldown').slideToggle(0);
    $('#triggerbutton2').on('touchend click', function(){
       $('#triggersection2.rolldown').slideToggle( "slow" );
    });
});
jQuery(document).ready(function($){
	// 1. On load quickly grab the natural height of the section
	var sectionExpandableHeight = $('#triggersection3.x-section.rolldown').height();
	// 2. Then set it to be small like 10px height
	$('#triggersection3.x-section.rolldown').css('height','10px');
	// 3. Give the button a class to identify the section's closed state
	$('#triggerbutton3').addClass('closed');
	// 4. When the button is clicked...
	$('#triggerbutton3.closed').click(function(){
    
   // Close other  open section
    $(".rolldown:not(#triggersection3)").each(function( index ) {
      if($(this).css('display') == 'block'){
  	     $(this).slideToggle(500);
	   	}
    });

		// 5. Animate the expansion of the section
		$('#triggersection3.x-section.rolldown').animate({height: sectionExpandableHeight}, 500, function () {
			// 6. Upon completion set the height back to auto to accomodate anything dynamic inside
			$(this).css('height','auto');
		});
		// 7. Give the button the right state by removing closed and adding open
		$('#triggerbutton3').removeClass('closed');
		$('#triggerbutton3').addClass('open');
		return false;
	});
});
jQuery(document).ready(function($){
	$('#triggersection3.rolldown').slideToggle(0);
    $('#triggerbutton3').on('touchend click', function(){
       $('#triggersection3.rolldown').slideToggle( "slow" );
    });
});
jQuery(document).ready(function($){
	// 1. On load quickly grab the natural height of the section
	var sectionExpandableHeight = $('#triggersection4.x-section.rolldown').height();
	// 2. Then set it to be small like 10px height
	$('#triggersection4.x-section.rolldown').css('height','10px');
	// 3. Give the button a class to identify the section's closed state
	$('#triggerbutton4').addClass('closed');
	// 4. When the button is clicked...
	$('#triggerbutton4.closed').click(function(){
    
    
    // Close other  open section
    $(".rolldown:not(#triggersection4)").each(function( index ) {
      if($(this).css('display') == 'block'){
  	     $(this).slideToggle(500);
	   	}
    });

		// 5. Animate the expansion of the section
		$('#triggersection4.x-section.rolldown').animate({height: sectionExpandableHeight}, 500, function () {
			// 6. Upon completion set the height back to auto to accomodate anything dynamic inside
			$(this).css('height','auto');
		});
		// 7. Give the button the right state by removing closed and adding open
		$('#triggerbutton4').removeClass('closed');
		$('#triggerbutton4').addClass('open');
		return false;
	});
});
jQuery(document).ready(function($){
	$('#triggersection4.rolldown').slideToggle(0);
    $('#triggerbutton4').on('touchend click', function(){
       $('#triggersection4.rolldown').slideToggle( "slow" );
    });
});

Hope this helps.

[chrispaynterdeepend]

Thank you for your suggestion!

I just tried this code (using Safari on an iPhone to test). When pushing the button, the section rolls down and then in a second or so rolls back up again automatically, rather than stay open until another button is pushed (which would roll up the open section, and roll down the section associated to the button).

[Lely]

Hi There,

Please try remove this part first:

jQuery(document).ready(function($){
	$('#triggersection4.rolldown').slideToggle(0);
    $('#triggerbutton4').on('touchend click', function(){
       $('#triggersection4.rolldown').slideToggle( "slow" );
    });
});

Then try clearing browser cache on mobile and try again. Do let us know how this goes.

[chrispaynterdeepend]

So close!

That change is making it work exactly the way I want it to on desktop (chrome), however on multiple mobile devices (safari/chrome) it rolls down on button press and then rolls straight back up automatically.

Any suggestions?

[morecolor]

try collapseomatic

[Rad]

Thanks for sharing @Morecolor

@Chris try removing all instances of that similar code ( from #1223492 ), there are multiple copies of them with just different ID.

Thanks!

[Author]

Posts