Add collapsible tabs feature to Pages template

The collapsible tabs via H2 tags is great on product pages; it would also be fantastic to use on regular Pages, e.g for making an FAQ page with collapsible headings and answers within, rather than a wall of text. I’m aware it’s possible with customisation to the code, but it’s something I’ve used on previous themes and found extremely useful. Thanks!

2 Likes

Hey there,
This is indeed a great suggestion and will be a solid addition to the theme. The great news is we actually have an accordion section scheduled for release with our next theme update :).
We can notify you once this update is released.
Do let us know if you have any other questions.

Hi @kuuracorp

We have added this template in to the latest update of Baseline. See more information here:

Please let us know how you get on with the template and if you have any feedback.

Thanks!

Amazing—thanks so much for this, already updated and in use.

2 Likes

Hey @quewayne and team,

The collapsible tabs feature is looking good. I had one query though and I wasn’t sure if this was a bug or a feature.

When pages become quite small, or on mobile, the text jumps from left aligned to centre aligned and looks a bit messy at times. Is there a way it could always be left aligned? What do you think?

First image shows on wide screen desktop, second on mobile, you can see the bunching and inconsistency.

Thanks for your help! Cheers Hugh


Hey Hugho,

I went ahead and added the styling below to your store and now the tabs will all be left-aligned:

@media(max-width:768px){
    .template-page #MainContent h2 button{
    	text-align: left;
    }
  }

Take a look and let us know if everything is now as expected :slight_smile: .