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

[Batman]

Hello,

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!

Thanks!

 

[toplakd]

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 November 28, 2022 by toplakd

[Batman]

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.

[toplakd]

This is where you can start.

It's fairly easy to implement it directly.

https://www.w3schools.com/howto/howto_js_collapsible.asp

I use it on for footer links and site info on mobile on my site.

Edited November 29, 2022 by toplakd

[e-com]

Example modification of a blocklayered module:

https://github.com/thirtybees/community-theme-default/compare/1.1.x...e-com-presta:community-theme-default:colapse-module

Analogously, it can be applied to other modules.

[Batman]

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.