Shoptimizer now includes an extremely light-weight accordion option which you can add to your short description area when editing a product. It’s built using the native <details> HTML element along with a pinch of javascript.
To include one, edit a product and scroll to the Product short description section. It’s normally at the end of the editing screen.
To include an accordion, you’ll need to add a shortcode. Why a shortcode? Currently, you cannot add a block to this short description field. So in the absence of this, a shortcode works best.
It begins with:
You can change the title to be anything you like.
You then write the content which is displayed when the accordion is opened. Simple text or an unordered list works best.
Finally, you close the accordion with this:
And that’s all there is to it. You repeat the process for as many accordions as you like.
Here is a completed accordion set which makes copying and pasting even easier.
Setting an accordion to be open by default
You can set an accordion title to be open by default by adjusting the markup as follows. Note the additional open=”open” within the title.
