Liquid, JavaScript, themes, sales channels
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
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
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
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%;
}
Can you please provide your store URL? So that I can check this in detail
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
Where did you use this in the Dawn theme (which liquid/css) ? Been looking for this for a long time.
Hello @CGroenhaug
Edit the code in the section main-product.liquid
You are welcome 🙂
Hi @King-Kang did you find how to close automatically an according when another opens?
I'm trying to figure out the same thing...Do you know anything more in the meantine? Thanks.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024