Accordion or dropdown where text changes upon open

[mkwolaver]

Hi, I’m trying to create an accordion or dropdown item where a user can click “Read More” to open the content and then “Close” or “Read Less” to close it. Is there a way to either change the text when the toggle or dropdown is open OR to have the item close based on clicking the dropdown, rather than having to click back on the original toggle to do this?

Thank you!

[nabeel]

Hey Marta,

Thank you for reaching out to us. Currently there is no element that changes text on click, the closest element is the Accordion element which you can customize with custom scripting however custom development is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it.

You can add an Accordion element for the toggle-able content. To close it you can insert the following link at the bottom of your content in each accordion item:

<a href="#" class="close-accordion">Read Less</a>

Then add the following code in your Cornerstone’s JS section:

jQuery(document).ready(function($){
	$(".close-accordion").click(function(e){
		e.preventDefault();
		$(this).parents('.x-acc-item').find('button.x-acc-header').click();
	});
});

This will close the associated accordion without clicking the main accordion toggle.

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Don’t forget to clear all caches including your browser’s cache after adding the code. Thanks!