Dawn theme - Accordion tabs (Product page)

Technical Q&A
1

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

1 Like
2

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

1 Like
3

I inspected in browser and noticed that if I replace

with

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

1 Like
4

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


  


.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%;
}
5

@King-Kang

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

6

Hello @IttantaTech ,

Thank you for the reply,

Ill send the store url via pm

7

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

{%- assign incrementAcc = 1 -%}

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

Thank you
3 Likes
8

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

9

Hello @CGroenhaug

Edit the code in the section main-product.liquid

You are welcome :slightly_smiling_face:

10

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

1 Like
11

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

1 Like
12

Hello @padma ,

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

13

Hello @BettiB ,

Since they are different accordions, never found a solution…

1 Like