Docs

[cowgillconsulting]

Dear Friends:

Please help me with two matters regarding X Theme accordions. My site is not yet visible but I think you’ll be able to understand my needs without seeing the site:

(1) I have a script attached to the “masthead” or “banner” on my home page. It does a variety of things to “reset” the page (scroll to top, etc.). I want to add another line to that script which closes any and all open accordions on the page, so as to bring the lower content back into view.

I found an old post about this and tried to update what I found to make it work with the current version of X, as follows:

jQuery(‘.x-accordion-body’).collapse(‘hide’);

That works great AFTER any one of the accordions has been opened. But if none of them have been opened, it toggles all of them into an open position. I’m guessing that the script needs to include some sort of class limitation or class switch so as to only toggle any open accordion, but I haven’t figured it out.

(2) Turning to matters of CSS and styling, I would like to add some custom CSS so that the heading of an accordion changes when the accordion is open. Basically I want the heading of any open accordion to have the same background color and font color as the hover condition that I have already created, so that the accordion heading holds the same color combination when it is open as when it is hovered over and clicked, reverting back to the original when it is closed and loses focus.

Thanks very much! As always, I appreciate your help.

[Darshana]

Hi there,

Thanks for writing in!

#1. Try using the following code:

jQuery(document).ready(function ($) {
  jQuery('.x-accordion-body.collapse.in').collapse('hide');
});    

#2. Try adding the following CSS rules and then change accordingly.

/* heading when closed state */
.x-accordion-heading .x-accordion-toggle.collapsed {
    font-weight: 300;
}
/* heading when open state */
.x-accordion-heading .x-accordion-toggle {
    font-weight: bold;
}

Hope that helps.

[Author]

Posts