Hello Community,
I would like to implement a simple Accordion on the Product-Detail-Page. I am using the Dawn-Theme. Does the Dawn Theme have an Accordion out of the Box? If not, how do I start. Are there any good ressources? I do not want to use a Theme App by the way.
Thank you for your help,
newbie
Hi @gregorsart
You can try using that: How To Create an Accordion (w3schools.com) to see how it goes, let us know if you need additional help!
Cheers!
@gregorsart I assume by now you have a solution.
For anyone else looking for a solution - I was looking at the dawn demo site and on the product page they already have an accordion. if you inspect the code on the example accordion you will get what you are looking for. All the accordion css is already in the dawn theme under component-accordion.css.
Try below to get started (the built-in one does not have auto close functionality). You will need to also replace the svg tags in below with the liquid code (ex. {% render โicon-closeโ %}).
<div class="product__accordion accordion">
<details>
<summary>
<div class="summary__title">
<!--Replace icon below with example "{% render 'icon-close' %}" -->
<svg class="icon icon-accordion color-foreground-text" aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M5.34 1.79A1 1 0 016.32 1h3.01a1 1 0 01.98.79 2.05 2.05 0 002.9 1.4 1 1 0 011.39.6l.37 1.23a1 1 0 01-.77 1.27 2.84 2.84 0 00-.25 5.52 1 1 0 01.69 1.25l-.42 1.35a1 1 0 01-1.6.47 2.66 2.66 0 00-3.89.51 1 1 0 01-1.64 0 2.66 2.66 0 00-3.8-.6 1 1 0 01-1.55-.49l-.5-1.6a1 1 0 01.61-1.24 2.72 2.72 0 00-.17-5.16 1 1 0 01-.67-1.25l.35-1.13a1 1 0 011.29-.65 2.05 2.05 0 002.7-1.48zm-2.77 2.5A3.05 3.05 0 006.32 2h3.01a3.04 3.04 0 004.31 2.09l.38 1.22a3.83 3.83 0 00-.34 7.46l-.41 1.35a3.64 3.64 0 00-5.36.7 3.69 3.69 0 00-4.33-1.31c-.31.12-.61.29-.89.5l-.5-1.61a3.7 3.7 0 001.35-6.12 3.7 3.7 0 00-1.57-.94l.35-1.12.25.07z" fill-rule="evenodd"></path></svg>
<h2 class="h4 accordion__title">
Materials
</h2>
</div>
<!--Replace icon below with example "{% render 'icon-close' %}" -->
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor">
</path></svg>
</summary>
<div class="accordion__content rte">
<p>content here</p>
</div>
</details>
</div>
Finished mine for the mobile footer menu 
Unfortunately, didnโt manage how to do the auto close functionality in this specific accordion.
Cheers
@King-Kang Same with me. Didnโt look into getting this working either. I only have two accordions on the product page so not a big deal for me.
On another site I run, the below jQuery function is what I used to get you started. If you get it working please post your modified code. You will need to build in the svg arrows (^) & (v) to swap. Below Iโm using the plus (+) & minus (-) signs.
(function ($) {
var allPanels = $('.accordion-product > dd').hide();
$('.accordion-product > dt > a').click(function () {
$('.plus').text('+');
$this = $(this);
$target = $this.parent().next();
$('span', $(this)).text('-');
if (!$target.hasClass('active')) {
allPanels.removeClass('active').slideUp();
$target.addClass('active').slideDown();
}
else if ($target.hasClass('active')) {
$target.slideUp();
$('.plus').text('+');
allPanels.removeClass('active');
}
return false;
});
Since they are separated accordions, maybe this example will help to find out, Itโs just a bet! Iโm not a programmer 
https://codepen.io/motuzik/pen/XWWRQXr
What do you think @shadowsfall118
this is a great solution to make it accordion on mobile
Not exactly what this question addresses, but definitely a neat little trick! Thanks for sharing!
This worked out perfectly for me, but now I have two sets of accordions; the one I created using the above code and the original demo one. How do I remove the demo accordion provided by the template?
@toneee Go to you admin page and in your active theme hit Customize, select Products, select Default Product or the template you use and see if any collapsible blocks are used here.
You could also try to remove the block of code " {%- when โcollapsible_tabโ -%}" in main-product.liquid.
I used the default dawn theme and there were no demo collapsible tabs setup by default so you would have had to setup the meta fields to populate the โdemoโ collapsible tabs.
Where do I input all of that code at?