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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024