Is there a way to have the Accordion element ONLY show the title of each Accordion element

Is there a way to have the Accordion element ONLY show the title of each Accordion element unless a visitor clicks to open an Accordion row?

An example for simplicity:

Chapter 1
Chapter 2
Chapter 3

Versus

Chapter 1 followed by text under Chapter 1
Chapter 2 followed by text under Chapter 2
Chapter 3 followed by text under Chapter 3

I’m looking to create four sections in an Accordion element. Each section will contain a lot of text. Most visitors will not scroll through lots of text to get to the next topic.

Thank you!

Karen V.

Hi there,

Please kindly go to the Classic Accordion element in the Cornerstone and add the class closeit in the Class option:

Then go to X > Launch > Options > JS and add the code below:

jQuery('.closeit .x-accordion-group:first-child .x-accordion-toggle').trigger('click');

The code above simulates the click event on the first accordion item. It will show the item opened at the first load, but immediately it will close as the Javascript code runs.

That way you will have the accordion items all closed at the first load. Thank you.

Hello! Thank you for the quick response.

I added closeit in class and then added the jQuery you provided, but the Accordion still remains open.

So below I provided each step I did in detail to see where there is an error.

  1. I went to the page were I inserted the Accordion element.
  2. I click on the Accordion section on that page
  3. I placed the words closeit under the “class” box.
    Am I supposed to place closed in the section where the Accordion box is or do I need to click on the Accordion box and write closeit under the “class” box there? – I actually tried both and neither worked.
  4. Hit save
  5. Went to my WP dashboard
  6. Clicked X
  7. Clicked Launch
  8. Clicked Options
  9. Clicked JS – Copied and pasted
    jQuery(’.closeit .x-accordion-group:first-child .x-accordion-toggle’).trigger(‘click’);
    Hit Save
    Hit Run

Please let me know what I did wrong.

Once this option will work, will it work just in the section that I added closeit too? I believe so, but want to verify.

Thanks,
Karen V.

Hi there,

The steps seem to be correct, and the code will work with both scenarios you mentioned in step 3 and the option will work only for sections or the Accordions that you added the class.

Would you please kindly get back to us with the URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Give us the exact Page name which you want to have the accordion closed. Also, make sure that you clear and purge cache if you use cache plugins.

Thank you.

Hi there,

Before we further continue, I’d like to clarify things first.

The accordion has its title visible by default, close or not, so there is no need for special code or customization. Unless you’re referring to the different title. Is it the accordion title (where you’re clicking), or the title within the accordion’s content (that’s not possible)? Would you mind providing a mockup design to help us determine the issue and what you’re trying to achieve?

And please provide the exact URL you’re implementing this.

Thanks!

Hello Rad,

Thank you for getting back to me. At this point, I found another solution that was more simplistic to do what I wanted to do.

Thanks for your help.

Karen V.

Cool, feel free to get in touch with us regarding any further queries about the X|Theme, and Cornerstone.

Have a great day,
Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.