Open Accordion In Reverse

[whitemedia]

Hi,

Is it possible to open an accordion in reverse, so that when a closed accordion is clicked the header moves down the page with the content above the header?

In addition, is it possible to have different text in the header when the item is open?

What I am trying to achieve is a “read more” scenario, where “Read more” is the header of the accordion. When opened, the header should be below the text in the content and ideally would be changed to read “Show less”.

Is this possible?

Thanks,
Christopher

[whitemedia]

I have found the solution to the first part of my question, which was easier than I was expecting! The following CSS did the trick:

.x-acc-item {
  flex-direction: column-reverse;
}

However, the second part I have not found a solution to: can the header’s text be altered to something else when the accordion is open?

Thanks,
Christopher

[tristup]

Hi Christopher,

Thanks for reaching out.
It is not possible to change the Header text while the item is open in the usual way, you need to add some custom code for that. I would suggest you go through the following thread which may help you on this.

Accordion or dropdown where text changes upon open

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!

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer or you can avail One, where we answer the questions beyond normal theme support.

Thanks

[whitemedia]

Thanks Tristup,

That worked perfectly with a couple of extra steps.

This HTML was added to the accordion’s content:

<p class="shut"><a href="#" class="close-accordion">Show less ...</a></p>

Then the following CSS was added to alter the layout and appearance of the “Show less” link:

.close-accordion {
  color: #000000;
}

.shut {
  margin-top: -15px;
}

The Javascript was added to the page’s JS:

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

Next, the accordion item’s header was entered as:

<span class="open">Read more ...</span>

Finally, another piece of CSS was added to hide the accordion’s header when expanded, so that the “Show less…” and “Read more …” are not both showing - only the “Show less…” link.

.x-active .open {
  display: none;
}

This now provides me with the exact functionality I was hoping for.

Thanks again for the quick help,
Christopher

[tristup]

Hi Christopher,

Glad that it helps. And thanks for sharing the solution that worked for you.