Shopify: How do I keep accordions closed on load?

[Michelle_S]

Hi there, I’m not an expert with javascript but would appreciate your advice on how to make it work on a Shopify page.

I have tried three different types of JS codes but nothing seems to work. This is the current HTML set up of an accordion:

<div class="accordion">

<div class="accordion__group"><a class="accordion__label" href="#">Features </a>
<div class="accordion__text">&nbsp;
<ul>
<li>100% organic cotton fleece<br></li>
<li>elastic waistband</li>
</ul>
&nbsp;</div>
</div>

</div>

This is one segment of a whole div under the class “accordion.” There are three more of these.

These are the JS codes I have tried. And yes, I have tried one by one, not all at once.

jQuery(document).ready(function() {
  jQuery(".accordion__group").accordion({
    collapsible:true,
    active:false,
  });
});



jQuery(document).ready(function(){
  jQuery(".accordion__label").click(function(){
    jQuery(".accordion__text").collapse('toggle');
  });
});


var coll = document.getElementsByClassName("accordion_label");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

I don’t know which JS is the best for this kind of HTML set up. The JS file is already referenced in the main HTML file so I don’t know what went wrong.

The style tag on the product detail’s HTML editor for your reference.

<style><!--
.accordion__group{
margin:0 !important;
}


.rte--product,.accordion__label{
--s-icon-size:20px;
display:flex;
align-items:center;
justify-content:space-between;
position:relative;
margin: 0;
padding-left:10px;
padding-right:5px;
cursor:pointer;
font-size:1em;
height:40px;
border-radius:2px;
transition: 0.3s;
}

.rte--product,.accordion__label:hover{
opacity: 1;
background-color:#F9F9F9;
transition: 0.3s;
transition: 0.3s;

}

.rte--product,.accordion__label a{
opacity: 1;
}

.accordion__text{
margin:0 !important;
}
</style>

Thank you

[SpadeX]

Hi @Michelle_S ,

  $("#accordion").show().accordion({
        active: false,
        autoHeight: false,
        navigation: true,
        collapsible: true
    });

Try this code hope this help you…!

[Michelle_S]

I just tried your code, it doesn’t seem to work for me.