Solved

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

gregorsart
Shopify Partner
63 1 19

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)

JHKCreate
Shopify Expert
3571 638 924

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 10 (10)

JHKCreate
Shopify Expert
3571 638 924

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
55walt
Visitor
1 0 0

Where do I input all of that code at?

shadowsfall118
Shopify Partner
125 13 34

@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
148 8 76

Finished mine for the mobile footer menu 🙂

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

 

Cheers

shadowsfall118
Shopify Partner
125 13 34

@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
148 8 76

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
Shopify Partner
4 0 1

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
Shopify Partner
125 13 34

@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
Shopify Partner
80 3 7

this  is a great solution to make it accordion on mobile 

We design and develop stunning websites to make your customers fall in love with your business.
5 star reviews https://ecomgraduates.com/
toneee
Shopify Partner
4 0 1

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