Collapsible Rows in the cornerstone / Xtheme builder

[Adamjaweed]

Hello,

I have a series of service offerings I’d like to have available for previewing, but I’d only like the main services to appear unless a button labled “see all” is clicked. I have looked through several other posts but am having a great deal of trouble identifying how to incorporate collapsible rows into my site. If you could take a look and let me know the correct steps or refer me in the right direction I would greatly appreciate the help. I’ll comment below with my site.

[mldarshana]

Hi Adam,

Thanks for writing in! Collapsible rows isn’t a feature offered by X theme. It could be technically possible with some custom development, but custom development falls beyond our scope of the support.

For collapsible content, one alternative solution would be to use our Accordion element. You can see examples from the following link (http://demo.theme.co/integrity-1/shortcodes/accordion/).

Or else, I would suggest you to contact a developer or a service to implement such custom feature.

Thanks!

[Adamjaweed]

Thanks, i thought as much. I’ve looked at other posts - specifically this - https://theme.co/apex/forums/topic/cornerstone-collapsible-sections/ and was hoping maybe you could help me apply this to my own site?

[friech]

Hi Adam,

Yes, we can use that same principle, but first, you need to remove the link you put on the “Click Here” button and add an ID to it instead.

e.g.

<a id="clickhere-toggle" href="#" style="outline: none;">Click Here</a>

Then add an ID to your Collapsable ROW as well

e.g.

Then add the JS code below to the Page > JS area.

jQuery(document).ready(function($){
	$( '#second-row' ).slideToggle(0);
	$( '#clickhere-toggle' ).click(function() {
	$( '#second-row' ).slideToggle( "slow" );
	});
});

Please keep in mind that this code only serves as a guide and it’s not our responsibility to maintain it in case a conflict with other scripts arise.

More details about .slideToggle() here.

Thanks,