Dawn theme - One open at a time collapsible tabs

Store Design
1

Hi,

Does anybody have some js code to make the Dawn theme collapsible tabs/accordions function so that only 1 stays open a time? At the moment a user can open all tabs at once.

Below is the current code.

Thanks.

{% render 'icon-accordion', icon: block.settings.icon %}

{{ block.settings.heading | default: block.settings.page.title }}

{% render 'icon-caret' %}
{{ block.settings.content }} {{ block.settings.page.content }}
2

Hi @Drifted

In dawn theme to open 1 tab/accordion at a time just need to add below code in Assets / global.js file

$(document).ready(function(){
  $('.product__accordion details').on('click',function(){
    $(this).attr('open');
    $(this).parent('.product__accordion').siblings().find('details').removeAttr('open');
  });
});

Happy Coding!!

3

For everyone’s information, I needed to add the following jQuery Library to the Theme.liquid file above the element to get the above solution to work:

The Dawn theme no longer uses jQuery but now JavaScript

4

THANK YOU. This helped so much.