New Shopify Certification now available: Liquid Storefronts for Theme Developers

Remove extra lines from top and bottom of accordion

Solved
sammyprince
Tourist
7 0 2

Hi

 

I used the code below to create an accordion in order to seperate the description into sections. However, there is extra lines at the top and bottom of the accordion that i would like removed and not sure sure. 

Below is the code

 

 

 

 

<div class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}>
  <style>
    /* Add CSS to style the accordion sections */
    .accordion {
      margin: 1rem 0;
      padding: 0;
      list-style: none;
      border-bottom: 1px solid #e5e5e5;
    }
  </style>


  <script>
    document.addEventListener("DOMContentLoaded", function () {
      var detailsElements = document.querySelectorAll(".product__accordion details");
      var summaryElements = document.querySelectorAll(".product__accordion summary");

      detailsElements.forEach(function (details) {
        details.addEventListener("click", function () {
          detailsElements.forEach(function (otherDetails) {
            if (otherDetails !== details) {
              otherDetails.removeAttribute("open");
            }
          });
        });
      });

      // Open the first section by default
      if (detailsElements.length > 0) {
        detailsElements[0].setAttribute("open", "open");
      }
    });
  </script>
  
  {% assign description_parts = product.description | split: '<h2>' %}
  {% for description_part in description_parts %}
    {% if description_part contains '</h2>' %}
      {% assign subheading_parts = description_part | split: '</h2>' %}
      <details id="Details-{{ block.id }}-{{ section.id }}" class="accordion">
        <summary>
          <div class="summary__title">
            <h2 class="h4 accordion__title">
              {{ subheading_parts[0] | strip_html }}
            </h2>
          </div>
          {% render 'icon-caret' %}
        </summary>
        <div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
          <div class="product__description rte quick-add-hidden">
            {{ subheading_parts[1] | replace: '</h2>', '' }}
          </div>
        </div>
      </details>
    {% endif %}
  {% endfor %}

</div>

 

 

 

 

 

Below is a screenshot of the output with the extra lines at the bottom and top of the accordion

Screenshot 2023-11-14 at 22.23.19.png

 

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
4190 962 1167

This is an accepted solution.

Thanks for the info, check this one. 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

#MainProduct-template--20406202990882__main > div.product-description > div {
    border: 0px !important;
}

 

  • And Save. 
  • Result:
  • Made4uoRibe_0-1700004738014.png

     

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 4 (4)
Made4uo-Ribe
Shopify Partner
4190 962 1167

Hi @sammyprince 

Can i check by store website? Would you mind to share it? Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Made4uo-Ribe
Shopify Partner
4190 962 1167

This is an accepted solution.

Thanks for the info, check this one. 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

#MainProduct-template--20406202990882__main > div.product-description > div {
    border: 0px !important;
}

 

  • And Save. 
  • Result:
  • Made4uoRibe_0-1700004738014.png

     

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


sammyprince
Tourist
7 0 2

That worked instantly. Thanks alot!!