This Accordion Liquid Code Should Work, What's Wrong With It?

NoahBaron
Shopify Partner
7 0 2

Hi, everyone!

I've recently made an accordion for my website and anytime I run it on local server there are no issues,  but once I put the code into Shopify the accordion never displays the hidden text once expanded. Could someone please help me?

theme.scss.liquid code:

 

//accordion
.faq
{

overflow: hidden;
}
.faq .tab-toggle
{
display: none;
}
.faq .tab-label
{
background-color: white;
display: block;
display: flex;
justify-content: space-between;
padding: 1em;
font-weight: bold;
color: black;
}

.faq .tab-label::after
{
content: '+';
transition: all .4s;
}

.faq .tab-toggle:checked ~ .tab-label::after
{
content: '-';
}
.faq .tab-content
{
background-color: rgb(255, 255, 255);
max-height: 0px;
overflow: hidden;
transition: all .4s;
padding: 0 1em;
}
.faq .tab-toggle:checked ~ .tab-content
{
max-height: 100vh;
padding: 1em;
}

 

 

product.liquid code:

 

 

 {% comment %} FAQ Section {% endcomment %}
  
 <div class="faq">
        <hr>
        <div class = "tab">
            <input type="checkbox" id="tab1" class="tab-toggle">
            <label for = "tab1" class="tab-label">Our design</label>
            <div class="tab-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure accusantium fugit vel deleniti id at. Quia, temporibus earum molestias laboriosam id magnam possimus iste nulla, deleniti explicabo dicta. Error, aperiam.
                
            </div>
         <hr>  
        </div>
    </div>
    <div class="faq">
        <div class = "tab">
            <input type="checkbox" id="tab2" class="tab-toggle">
            <label for = "tab2" class="tab-label">How it works</label>
            <div class="tab-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure accusantium fugit vel deleniti id at. Quia, temporibus earum molestias laboriosam id magnam possimus iste nulla, deleniti explicabo dicta. Error, aperiam.</div>
        </div>
        <hr>
    </div>

 

0 Likes