Need Help: How to make elxis template with dinamic css column

[muharihar]

hi all....

i want to design a template with "dinamic css column" (please take a look the pic's on attacthment)
any one can help me?

note:
1. Pic 1 -> when we click menu "ALL" there is 3 column displayed
2. Pic 2 -> when we click menu "2 COLUMN (LEFT)" there is 2 column displayed (Column 1 and Column 2-> the width incresed to right), the assumtion: only modul with position on the left and content is displayed, no modul in the right position
3. Pic 3 -> when we click menu "2 COLUMN (RIGHT)" there is 2 column displayed (Column 2-> the width incresed to left and Column 3), the assumtion: only modul with position on the right and content (center) is displayed, no modul in the left position
4. Pic 4 -> when we click menu "ONE" there is only 1 column displayed (Column 2 -> the width incresed to left and rigth),
the assumtion: only modul with position on the content (center) is displayed, no modul in the left and right position

[attachment deleted by admin]

[ks-net]

Please be more specific ... you showing the result you want but how you want this "dynamic" column to appear/disappear?
when loading  page... when clicking a button when?

also you may post -if you wish so - an add to  job-offering-adds category in this forum.
https://forum.elxis.org/index.php?board=48.0

[datahell]

This has been done with using javascript, css and cookies on the free "BlueBell HC" template (HC stands for Hide Columns). You can download and study the template.

Here is a tip:
You should play with elements "display" and "width" (you can also use "visibility").

Case a (everything is visible)
left column: width 20%, display: block
mid column: width: 60%, display: block
right column: width 20%, display: block

Case b (right column is hidden)
left column: width 20%, display: block
mid column: width: 80%, display: block
right column: width 0, display: none

Case c (left+right column are hidden)
left column: width 0, display: none
mid column: width: 100%, display: block
right column: width 0, display: none

[muharihar]

@ks-net
the information about "dynamic" was updated to the first post. 

@Datahell
Thanks Datahell, i will download the free "BlueBell HC" template and study it.

[rentasite]

@Datahell
Thanks Datahell, i will download the free "BlueBell HC" template and study it.
[/quote]

Fix

In customize.css of "BlueBell HC" template, near line 109

find this
/* form button hover */

.button {

and replace it with:
/* form button hover */

.button:hover {