[MengParticipant]

I’ve posted before in the forums about the need for a collapsible section because in Cornerstone the accordion-elements offer so little options to structure their respective contents in terms of columns, etc.

Right now I’ve got the following set-up:
[ BUTTON with id #services-trigger-button ] which will fire the:
[ COLLAPSIBLE SECTION with id #services and classes .x-section.section-expandable ]

I’ve come so far to load it small and expand it upon clicking the button, but I can’t seem to get it to close afterwards. Any help?

Below is the commented javascript I’ve written for it:

jQuery(document).ready(function($){
	// 1. On load quickly grab the natural height of the section
	var sectionExpandableHeight = $('#services.x-section.section-expandable').height();
	// 2. Then set it to be small like 10px height
	$('#services.x-section.section-expandable').css('height','10px');
	// 3. Give the button a class to identify the section's closed state
	$('#services-trigger-button').addClass('closed');
	// 4. When the button is clicked...
	$('#services-trigger-button.closed').click(function(){
		// 5. Animate the expansion of the section
		$('#services.x-section.section-expandable').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
		$('#services-trigger-button').removeClass('closed');
		$('#services-trigger-button').addClass('open');
		return false;
	});
});
// So far so good, but now the part that's troublesome...
jQuery(document).ready(function($){
	// 8. (DOES NOT WORK!) When clicking the button when the section is open...
	$('#services-trigger-button.open').click(function(){
		// 9. Animate the closing of the section
		$('#services.x-section.section-expandable').animate({height: 10}, 500);
		// 10. And change the button's class back to closed
		$('#services-trigger-button').removeClass('open');
		$('#services-trigger-button').addClass('closed');
		return false;
	});
});

So what does work? After opening the section, all the classes are changed properly. It’s just that I can’t get it to close anymore…

Your review of the jquery code is highly welcome.

[Paul RModerator]

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Thanks

[MengParticipant]

Hey guys, could you just look over the javascript? Everything else is working fine and I obviously haven’t put the code online because it’s not working yet.

[Paul RModerator]

Hi Meng,

You can change the code to this.

jQuery(document).ready(function($){
    $('#services-trigger-button').click(function(){
       $('#services.section-expandable').slideToggle( "slow" );
       
    });
});

Make sure to add the class section-expandable and id #services to your section
Then add services-trigger-button as ID of your button.

Hope that helps.

[MengParticipant]

Superbe! Thank you so much. I wanted the section to be collapsed upon loading the page so I tweaked it a little bit, but it works like a dream now. Thank you!

jQuery(document).ready(function($){
	$('#services.section-expandable').slideToggle(0);
    $('#services-trigger-button').click(function(){
       $('#services.section-expandable').slideToggle( "slow" );
    });
});

You could close this thread and maybe preserve it for future reference. This is a fine jury-rigged solution imho 😉

[Prasant RaiModerator]

Your satisfaction is a great compliment for us.

[ellsworthParticipant]

Hello Theme.co,

I am wondering, in a general way, if it is possible to use this script in a manner that allows targeting of specific sections. So for instance, I tried using your script (which works well) to do this to one specific section on a page. When a button is clicked to trigger the reveal, it works as expected, but targets all sections that have the id and class used to trigger such behavior. Wondering if there is an elegant solution to make this section specific. Reason being, I want to have ten sections on one page popout when the associated button is clicked. Not have all pop out and back in when any of the buttons is clicked.

[ellsworthParticipant]

This reply has been marked as private.

[MengParticipant]

Ellsworth, it is good practice *not* to assign the same ID twice. For that you use classes. So if you have three sections:

• Section 1 | id: one | class: section-expandable
• Section 2 | id: two | class: section-expandable
• Section 3 | id: three | class: section-expandable

That means you’ll need three button well:

• Button that triggers section 1 | id: one-trigger-button
• Button that triggers section 2 | id: two-trigger-button
• Button that triggers section 3 | id: tree-trigger-button

And then the JS:

jQuery(document).ready(function($){
	$('#one').slideToggle(0);
    $('#one-trigger-button').click(function(){
       $('#one').slideToggle( "slow" );
    });
});

And so on for the other two.

You see, the part that says $(‘#one’) is just to identify which object to open/close. As long as you keep your ID’s unique, it’ll work just fine with anything. Hope this helps 🙂

[ellsworthParticipant]

Got it, you’re awesome. Thank you.

[ellsworthParticipant]

Hey, sorry to bother you again. Any reason these scripts may not work on a mobile device?

edit: I should specify, it works when I open developer tools and spoof as mobile on my computer, yet when I try it on both safari and chrome for iPhone, tapping the button doesn’t trigger the pull out.

[MengParticipant]

Could have something to do with how jQuery is loaded on mobile or whether your phone browser enables javascripts in the first place. Maybe someone from Themeco Staff can figure that out, sorry, can’t help you with that 🙂

[LelyModerator]

@Meng,

Thank you for helping other members of the community.

@ellsworth

Please try to update Javascript to this:

jQuery(document).ready(function($){
	$('#one').slideToggle(0);
    $('#one-trigger-button').on('touchend click', function(){
       $('#one').slideToggle( "slow" );
    });
});

Hope this helps.

[Author]

Posts