Accordion with Shopify's Dawn Theme

[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!

[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 

[Blizzard21]

this  is a great solution to make it accordion on mobile 

[video]