FROM CACHE - en_header

Dawn theme - Accordion tabs (Product page)

King-Kang
Trailblazer
143 7 56

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)
Guleria
Shopify Partner
2023 428 624

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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
Buy me a coffee My PayPal
Try GEMPAGES page builder.
King-Kang
Trailblazer
143 7 56

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
143 7 56

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 95

@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
143 7 56

Hello @IttantaTech ,

Thank you for the reply,

Ill send the store url via pm

King-Kang
Trailblazer
143 7 56

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
143 7 56

Hello @CGroenhaug 

Edit the code in the section main-product.liquid

You are welcome 🙂

padma
New Member
2 0 1

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

BettiB
Excursionist
16 1 12

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

 

King-Kang
Trailblazer
143 7 56

Hello @padma ,

 

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

King-Kang
Trailblazer
143 7 56

Hello @BettiB ,

 

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