Jump to content
thirty bees forum

Get Left column blocks collapsible on mobile screens (community-theme-default)


Recommended Posts


I'm customizing my community-theme-default to make it fit the best possible to my store. Does anybody know how it is possible to make blocks from the left (or right) column collapsible on the mobile view, just as the main menu does? You see the title of the block and a plus (+) beside. You click on the + to see the content of this block.

I'm asking because there are some blocks that could be interesting for customers, so I don't want to hide them on the mobile screen. But if they just keep their complete size, customers have to scroll a lot before seeing products.

I'm thinking about some JavaScript code to put in the custom code area on TB.

I am happy about every suggestion!



Link to comment
Share on other sites

Even if collapsable, if one is in the middle of the screen or lower, you have to scroll all the way up to the header, to click on it.

I rather sacrifice some top area for fixed bar with quick navigation buttons which open sidebars with all needed store browsing stuff.

Something I worked on a while ago, but it's time consuming to fulfill the theme compatibility with all the wishes and modules out there.


Edited by toplakd
Link to comment
Share on other sites

Congratulations on your work. The idea is really great and it's good to know that something like this exists. But that's not what I'm looking for at the moment.

I'm looking for a way to collapse the blocks from the left (or right) column in mobile view. So that they don't take up so much space and the customer doesn't have to scroll as much.

It was included by default in my old PS theme default bootstrap. Blocks in the left column were only displayed as a heading in the mobile view and could be expanded using a + button. I would like to have this functionality for the community theme default.

I think the easiest option would be JavaScript. Unfortunately, I don't know enough about it.

Link to comment
Share on other sites

Thanks a lot for your helpful replies!

@toplakd your solution is great, but after trying, I have the problem that I can't change the HTML. So for me, it looks like it doesn't work without further JavaScript knowledge.

@e-com thank you for your ready TB solution. It looks easy to use. But is it safe for updates? I do an update, the changes are gone, right? Even if I use override for the hole file, I could get problems with updates, right? Isn't it possible to add this functionality to the theme?

So what would be best for me is some kind of mix of your both solutions. For example, JavaScript and CSS I can place in the backend of TB.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...