Solved

Autoexpand product tabs - Prestige theme

jesperahlbomUK
Shopify Partner
53 4 25

Hi - I would like some help to activate autoexpand on our product tabs. We're using Prestige theme.

I've found the below section in the theme.css file (row 2244), it sounds like what I'm looking for, but I'm unsure around which places in the code I need to change it in order for it to work.

store url: www.classicbootsuk.com

@media screen and (min-width: 641px) {
/* When this class is applied to a collapsible, it will display as a collapsible on mobile but not on larger screen, where it will
automatically appear is auto-expanded */
.Collapsible--autoExpand {
border: none;
overflow: visible;
}

 

Any ideas, please?

 

Thank you! / Jesper

Accepted Solution (1)

UmairA
Shopify Partner
1106 101 225

This is an accepted solution.

Hey there @jesperahlbomUK!

First, Your store design is awesome!

Second, what you are trying to achieve can be done by adding the following code to your theme.scss.liquid file

.Collapsible__Inner {
visibility: visible !important;
height: auto !important;
overflow: visible !important;
}

 

Hope that helps!

View solution in original post

Replies 10 (10)

UmairA
Shopify Partner
1106 101 225

This is an accepted solution.

Hey there @jesperahlbomUK!

First, Your store design is awesome!

Second, what you are trying to achieve can be done by adding the following code to your theme.scss.liquid file

.Collapsible__Inner {
visibility: visible !important;
height: auto !important;
overflow: visible !important;
}

 

Hope that helps!

jesperahlbomUK
Shopify Partner
53 4 25

@UmairA Thank you - it works, but it disables the function to collapse it again.

So, is it possible to remove the + button completley

Or, change it to the - button, and when the visitor press the - button it collapses?

 

image.PNG

UmairA
Shopify Partner
1106 101 225

Hey @jesperahlbomUK!

The + and - being changed and re-collapse is using JQeury/JavaScript. So the only way for me to help is to look at the backend of your store and make modification accordingly to your theme.js.liquid or custom.js.liquid file.

You can contact me if you need my help.

jesperahlbomUK
Shopify Partner
53 4 25

No worries - I added below in css to hide the +

 

Thank you for your quick help @UmairA 🙂

 

.Collapsible__Plus
{
visibility: hidden !important;
}

UmairA
Shopify Partner
1106 101 225

@jesperahlbomUK!

That was Genius!

Best of luck with your startup!

szhane
Visitor
2 0 0

Hello, I tried the code above but it expanded all the product tabs I have. I am looking into expanding only a specific product tab as I have two of them. How would it be possible? Thanks in advance!

Here is our store product page:

https://darkmatterprints.com/products/voyager-1s-pale-blue-dot-wall-art

Santossohan
Visitor
2 0 0

did you find any solution to this?

szhane
Visitor
2 0 0
I contacted the theme provider and they are the ones who worked on it.
themuseclub
New Member
7 0 0

Hi,

 

I would also like to auto expand one tab, any solutions yet?

Thanks!

Santossohan
Visitor
2 0 0

How can I autoexpand one specific tab?