Minimal Theme - Accordion Menu

koze
Excursionist
12 1 5

Thank you for taking the time to read my issue.

So I've made an Accordion/ drop down menu in my products page.

It works but I have some issues with it.

  • I have built an accordion on my page here however it is not collapsing. Is anyone able to suggest why? I will paste below the code used in the page template and also the page.

 

 

 

 

<style>
   .accordian {
      max-width: 600px;
      display: block;
   }
   .accordian .card {
      float: left;
      width: 100%;
   }
   .accordian .card .card-header h3 {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
      margin: 0;
   }
   .accordian .card .card-header:hover h3 {
      background-color: #ccc !important;
   }
   .active,
   .card-header__title {
      background-color: #ccc !important;
   }
   .noActive {
      background-color: #eee !important;
   }
   .accordian .card .card-header {
      position: relative;
   }
   .accordian .card .card-header span {
      position: absolute;
      right: 20px;
      top: 16px;
      height: 25px;
      width: 25px;
      border-radius: 50%;
      text-align: center;
      line-height: 25px;
      font-size: 13px;
   }
   .accordian .card .card-header span.fa-plus::after {
      content: '\002B';
      color: #777;
      font-weight: bold;
      float: right;
      margin-left: 5px;
   }
   .accordian .card .card-header span.fa-minus::after {
      content: "\2212";
      color: #777;
      font-weight: bold;
      float: right;
      margin-left: 5px;
   }
   .accordian .card .card-body {
      padding: 20px;
   }
   .accordian .card .card-body {
      display: none;
   }
   /*open one card by default*/
   .accordian .card:nth-child(0) .card-body {
      display: block;
   }
   .accordian .card .card-body p {
      font-size: 15px;
      line-height: 24px;
      color: #444444;
      margin: 0px;
   }
</style>
<div class="accordian">
   {%- if product.metafields.tab1.title and product.metafields.tab1.content -%}
   <div class="card">
      <div class="card-header">
         <h3 class="card-header__title">{{ product.metafields.tab1.title }}</h3>
         <span class="fa-minus"></span>
      </div>
      <div class="card-body">
         <p>
            {{ product.metafields.tab1.content }}
         </p>
      </div>
   </div>
   {%- else -%}
   <div class="product-description rte" itemprop="description">
      {{ product.description }}
   </div>
   {%- endif -%}
   {%- if product.metafields.tab2.title and product.metafields.tab2.content -%}
   <div class="card">
      <div class="card-header">
         <h3 class="card-header">{{ product.metafields.tab2.title }}</h3>
         <span class="fa-plus"></span>
      </div>
      <div class="card-body">
         <p>
            {{ product.metafields.tab2.content }}
         </p>
      </div>
   </div>
   {%- endif -%}
   {%- if product.metafields.tab3.title and product.metafields.tab3.content -%}
   <div class="card">
      <div class="card-header">
         <h3 class="card-header">{{ product.metafields.tab3.title }}</h3>
         <span class="fa-plus"></span>
      </div>
      <div class="card-body">
         <p>
            {{ product.metafields.tab3.content }}
         </p>
      </div>
   </div>
   {%- endif -%}
   {%- if product.metafields.tab4.title and product.metafields.tab4.content -%}
   <div class="card">
      <div class="card-header">
         <h3 class="card-header">{{ product.metafields.tab4.title }}</h3>
         <span class="fa-plus"></span>
      </div>
      <div class="card-body">
         <p>
            {{ product.metafields.tab4.content }}
         </p>
      </div>
   </div>
   {%- endif -%}
   {%- if product.metafields.tab5.title and product.metafields.tab5.content -%}
   <div class="card">
      <div class="card-header">
         <h3 class="card-header">{{ product.metafields.tab5.title }}</h3>
         <span class="fa-plus"></span>
      </div>
      <div class="card-body">
         <p>
            {{ product.metafields.tab5.content }}
         </p>
      </div>
   </div>
   {%- endif -%}
</div>
<!-- jqurey code -->
<script>
   $(document).ready(function () {
      $(".card-header").click(function () {
         $(".card .card-header h3").removeClass("active")
         $(".card .card-body").removeClass("active").slideUp();
         $(".card .card-header span").removeClass("fa-minus").addClass("fa-plus");
         $(".card .card-header h3").removeClass("active").addClass("noActive");
         $(this).next(".card-body").slideDown();
         $(this).children("span").removeClass("fa-plus").addClass("fa-minus");
         $(this).children("h3").removeClass("noActive").addClass("active");
      })
   })
</script>

 

Replies 8 (8)
KetanKumar
Shopify Partner
24923 2498 9040

@koze 

sorry your store is password protect 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
koze
Excursionist
12 1 5

emailed/messaged you the password 

KetanKumar
Shopify Partner
24923 2498 9040

@koze 

sorry but can't see

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
koze
Excursionist
12 1 5

Password: lepies

koze
Excursionist
12 1 5

It's currently like below when you click the "-" to close the accordion it doesn't fully collapse, it starts closing and just opens back up.

Screenshot 2021-11-13 1.14.10 PM.png

 

I want it to be like below when you click on the "-" sign.

small_faq.png

 

Also when opening the other tabs, it would bring the screen down. Any way to fix it so it doesn't push the screen down when you open any other accordion?

 

Thanks for the help

https://venaida.com/products/ergonomic-laptop-stand

KetanKumar
Shopify Partner
24923 2498 9040

@koze 

modify this code

https://codepen.io/Frontend/pen/vNvOxG

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
koze
Excursionist
12 1 5

Thank you so much!!

 

Where am I supposed to put those line of code?

KetanKumar
Shopify Partner
24923 2498 9040

@koze 

yes please change that code product  page

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing