Having the first accordion tab open by default

Store Design
1

Hi,

How do I make it such that the first accordion tab opens by default when the user enters the page? Here is my code:

1 Like
2

@Juztean

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.

3

Hi @KetanKumar

Thanks so much for the quick response. My site URL is: https://juz-fitness.myshopify.com/ and the password is traone

Thanks.

4

@Juztean

Please try this css class

.panel:nth-of-type(1) {
    padding: 0 18px;
    font-size: 15px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s ease-out;
    border-bottom: 3px solid transparent;
    max-height: 100% !important;
}
5

Hi @dmwwebartisan

It does open by default, but it cant be closed when i click the accordion.

6

@Juztean

try this code


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
7

Hi @dmwwebartisan

It does open the first accordion when I open it, but I cant close it. It only closes when I click another accordion, but i want to be able to open multiple accordions at the same time. Is that possible?

1 Like
8

@Juztean

thanks for url bt i can;t see any tab please show me

9

hi @KetanKumar

Sorry, this url brings you directly to the accordion tabs: https://juz-fitness.myshopify.com/products/bamboo-tee

1 Like
10

@Juztean

your script doesn’t allow this can you please change code something like this

https://codepen.io/yukinouz1/pen/Mdxqqx

11

Hi @KetanKumar

Sorry, Im quite foreign to coding. It doesnt work when i paste the html or css code. Is there something I need to add?

12

@Juztean

no doesn’t work our previous code

you have modification if you have able to code or contact Shopify expert or me

13

Hi @KetanKumar

Sorry, I’m not sure I understand what you meant

1 Like
14

@Juztean

It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert or me

15

@dmwwebartisan

Can you please tell me where this code should go? On which css file?!

16

Hello @Juztean

Did you ever get this sorted out-

I would like the same thing on my webpage.

Thanks

1 Like
17

@TBS2022

can you please share us your store url

18

www.thebodyshop.mu

cleeth