In this article we will explain how you could force accordions on single product page to be always opened. Whole example is made on Bridge theme, so some modifications could be needed for other themes.
Please note that the following accordions are by default closed on load: Description, Additional Information, and Reviews.
These sections need to be interacted with, or to put it more precisely clicked on, in order for the info from the accordion to appear.
However, if you’d like to change this and have these accordions always open, adding some simple line of codes will do the trick.
We’ll use the Description accordion tab in our example here.
To go about this, please paste the code below in the Custom CSS field found in Qode Options > General > Custom Code:
.description-always-open {
display: block !important;
}
Also, add the following code into the Custom JS field found in Qode Options > General > Custom Code:
// single product accordion description always opened
$j('.single-product .q_accordion_holder .title-holder.description_tab').removeClass('ui-state-default ui-corner-bottom').addClass('ui-accordion-header-active ui-state-active');
$j('.single-product .q_accordion_holder .title-holder.description_tab + .accordion_content').addClass('description-always-open');
Now your Description accordion tab will look like this by default:
