FROM CACHE - en_header

Accordion with Shopify's Dawn Theme

Solved
gregorsart
Shopify Partner
53 1 17

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

Accepted Solution (1)

Accepted Solutions
JHKCreate
Shopify Partner
3467 624 879

This is an 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!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com

View solution in original post

Replies 6 (6)
JHKCreate
Shopify Partner
3467 624 879

This is an 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!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
shadowsfall118
Explorer
56 0 9

@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
Trailblazer
143 7 56

Finished mine for the mobile footer menu 🙂

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

 

Cheers

shadowsfall118
Explorer
56 0 9

@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
Trailblazer
143 7 56

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
Shopify Partner
79 3 4

this  is a great solution to make it accordion on mobile 

[video]

helping others 🙂