How to add a collapsible section in Dawn theme?

Store Design
1

Hello everyone!

I am using the Dawn Theme and currently trying to figure out a couple of things. One of those is the following:

I am trying to add a collapsible page section like this:

8fd5a7fd677b1e9466ebe4a31e87c06493896bc6

I would need to follow this tutorial but I am very new to coding and I am not sure what to do. Here is the tutorial:

Grab the latest script here:

https://gist.github.com/noahub/762ca1dae00861c5265fa9a679c35953 2.9k

Step 1.

Create a new page section and your desired content.

Step 2.

Nest your content inside of a box element (this simplifies things for the script).

Step 3.

Create a button element as your section visibility toggle.

Step 4.

Copy script from collapsible_section.js 2.9k and paste in your javascripts section

Step 5.

Update your IDs

for example, if I want to do it with a random text and a random image, what would I need to do?

Thank you so much in advance!

p.s. this tutorial is taken from another source

2

I was also thinking that I could achieve the same result by using an accordion section. Then I would insert an html page inside so that when I click, it shows the page.

I am now trying to translate the clickable row to the end of the section when clicked but I can’t manage to do it… (like a reverse accordion)

with the code:

.accordion details[open] > summary {
transform: translateY(100%);
transition: .3s ease-in-out;
}

I just manage to move it a little bit but it doesn’t go straight to the end of the section. Also, the animation is smooth on the opening but it is not animated on closing.

Any help?

3

@Anonymous

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

Hello Ketan!

thanks for the interest!

I am currently using a fresh version of the Dawn Theme so basically there’s nothing customized going on.

As previously stated, what I want to achieve is a custom section by following that tutorial. However, that tutorial comes from a different source so it is not specifically written for Shopify.

As an example, I would like to nest into a collapsible page, two “Image with Text” sections.

I can then customize the code for my needs but I would need a starting point

Is it possible to achieve something like that? (To grab multiple sections from the homepage and nest them into a collapsible container).

5

@Anonymous

yes, please try this way

https://codepen.io/ocidique/pen/JjqpoE