How can I implement an accordion on Dawn theme's product detail page?

[gregorsart]

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

[JHKCreate · Accepted solution]

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!

[55walt]

Where do I input all of that code at?

[shadowsfall118]

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

[King-Kang]

Finished mine for the mobile footer menu 🙂

Unfortunately, didn't manage how to do the auto close functionality in this specific accordion.

Cheers

[shadowsfall118]

@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;
    });

[King-Kang]

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 

[toneee]

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? 

[shadowsfall118]

@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.

[EcomGraduates1]

this  is a great solution to make it accordion on mobile 

[toneee]

Not exactly what this question addresses, but definitely a neat little trick! Thanks for sharing!