Dawn theme - Accordion tabs (Product page)

King-Kang
Trailblazer
148 8 76

Hi there,

I am using the new Shopify Dawn theme, and I need some help with the product page accordion.

I would like to have the very first accordion tab of each product page open as default, and have each tab closed automatically anytime that another tab is opened.

Kindly help


Replies 12 (12)

Developer-G
Shopify Partner
3032 593 846

Hello @King-Kang ,

Not possible to provide an exact code a/to the theme you are using.
But if you know code you can follow it https://codepen.io/moso/pen/vKGxMx or ask you dev. to implement similar.

Thanks

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
King-Kang
Trailblazer
148 8 76

I inspected in browser and noticed that if I replace

<details> with <details open>

in main-product.liquid around line 105

all tabs are opened by default, I only want the first one, and make them close automatically when another is opened.

All help is really welcome.

Thank you

 

King-Kang
Trailblazer
148 8 76

I will let the code here, maybe someone can help me

<div class="product__accordion accordion" {{ block.shopify_attributes }}>
  <details>
    <summary>
      <div class="summary__title">
        {% render 'icon-accordion', icon: block.settings.icon %}
        <h2 class="h4 accordion__title">
          {{ block.settings.heading | default: block.settings.page.title }}
        </h2>
      </div>
      {% render 'icon-caret' %}
    </summary>
    <div class="accordion__content rte">
      {{ block.settings.content }}
      {{ block.settings.page.content }}
    </div>
  </details>
</div>

 

.accordion summary {
  display: flex;
  position: relative;
  line-height: 1;
  padding: 1.5rem 0;
}

.accordion .summary__title {
  display: flex;
  flex: 1;
}

.accordion + .accordion {
  margin-top: 0;
  border-top: none;
}

.accordion {
  margin-top: 2.5rem;
  margin-bottom: 0;
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.accordion__title {
  display: inline-block;
  max-width: calc(100% - 6rem);
  min-height: 1.6rem;
  margin: 0;
  word-break: break-word;
}

.accordion .icon-accordion {
  align-self: center;
  min-width: 1.6rem;
  margin-right: 1rem;
  fill: rgb(var(--color-foreground));
}

.accordion details[open] > summary .icon-caret {
  transform: rotate(180deg);
}

.accordion__content {
  margin-bottom: 1.5rem;
  word-break: break-word;
}

.accordion__content img {
  max-width: 100%;
}
IttantaTech
Shopify Partner
525 55 102

@King-Kang 

Can you please provide your store URL? So that I can check this in detail

Thanks,
Ittanta Technologies Pvt. Ltd. | Shopify Expert
If reply is helpful, please Like and Accept Solution.
To hire us, contact us at info@ittanta.com
King-Kang
Trailblazer
148 8 76

Hello @IttantaTech ,

Thank you for the reply,

Ill send the store url via pm

King-Kang
Trailblazer
148 8 76

Solved the first one, being open as default, with:

 

{%- assign incrementAcc = 1 -%}
<details {%- if incrementAcc == 1 -%} {{ ' open' }} {%- endif -%}>
{%- assign incrementAcc = incrementAcc | plus:1 -%}

 


Now if you got an idea to close automatically an accordion, when another accordion is open, it's very welcome!

Thank you

CGroenhaug
Tourist
8 1 2

Where did you use this in the Dawn theme (which liquid/css) ? Been looking for this for a long time. 

King-Kang
Trailblazer
148 8 76

Hello @CGroenhaug 

Edit the code in the section main-product.liquid

You are welcome 🙂

padma
Visitor
2 0 1

Hi @King-Kang did you find how to close automatically an according when another opens?

BettiB
Excursionist
27 1 15

I'm trying to figure out the same thing...Do you know anything more in the meantine? Thanks.

 

King-Kang
Trailblazer
148 8 76

Hello @BettiB ,

 

Since they are different accordions, never found a solution...

King-Kang
Trailblazer
148 8 76

Hello @padma ,

 

Sadly, I never found a way to make it work...