Checkbox hack – apply only if multiple boxes ticked?

[tomasz86]

http://codepen.io/tomasz86/pen/wuzcK

Is there any way to make the element appear only if both boxes are ticked?

[Paulie_D]

Unless they are nested I very much doubt it. Sounds like a bad idea anyway.

[dgriesel]

You mean like this? http://codepen.io/anon/pen/nEoLa

#checkbox1:checked ~ #checkbox2:checked ~ p

[dgriesel]

@tomasz86:
One idea would be to assign width values to your columns and set the width of your table to

<sum of visible columns> / <sum of all columns>

and the width of each column to

<value of current column> / <sum of all columns>,

e.g.
Col1: 1 | Col2: 5 | Col3: 2
translates to
1/(1+5+2) = 12.5% for Col1,
5/(1+5+2) = 62.5% for Col2,
2/(1+5+2) = 25% for Col3,
(1+5+2)/(1+5+2) = 100% for the table.

When you hide Col2, this becomes
1/(1+2) = 33.3% for Col1,
2/(1+2) = 66.7% for Col3,
(1+2)/(1+5+2) = 37.5% for the table.

It should be possible (but not trivial) to do the neccessary calculations with lists and for-loops in SASS. For an introduction to lists see https://css-tricks.com/metafizzy-effect-with-sass/ or http://hugogiraudel.com/2013/07/15/understanding-sass-lists/
However, figuring out the algorithm to solve your problem – that will be your job ;)

[Author]

Posts