So in the snippet you can see a wrapper (red border), which contains three columns. The first column (lightgrey one) has a fix width of 30%. Then you can see another wrapper (blue border) which contains two columns (lightblue and lightyellow one). The wrapper (blue border) has also a fix width of 70% to his parent. The the columns within have again two widths of 85% (lightblue) and 15% (lightyellow). Now, I would like to expand/close the lightyellow one, when I click on it. The clue is, when I expand it, the lightblue and yellow blue should have 50% of the wrapper (blue border). When I close the lightyellow it should have again 85% and 15%. This should be dynamicly... I have no idea how to do this...Hope someone can help me..Thanks

!!! EDIT: MY OWN SOLUTION WITH ANGULARJS/NG-CLASS !!!

Descitpion: I've found a good solution with

angularjs

and it's

ng-class

. I use a

boolean

, which is default false for checking if my column is expanded or not. Than I implemented a new

css

class

with a width of 50%. I assign this class to my two columns which should have a width of 50% when the column is expanded. So when I expand the column and the boolean is true, they both get the class with 50% width and show correctly. When I close the column again, the class is removed and the groups have their default width's of 85% and 15%. This works fine and it's very simply. Here you go: