I am currently working on a div where I need to increase the width based on checkboxes that are selected. The goal is to add to the width as more checkboxes get checked.
Here is an example of the HTML code I'm working with (please excuse any syntax errors, as I am writing this from memory):
<div class="barDiv"></div>
<label for="cb50"><h2>Click here to add 50!</h2></label>
<input type="checkbox" id="cb50">
<label for="cb30"><h2>Click here to add 30!</h2></label>
<input type="checkbox" id="cb30">
This is a sample SCSS code I have been working on:
$add: 0px;
.barDiv {
width: $add;
height: 10px;
background-color: #444;
}
#cb50:checked {
~ .barDiv {
width: $add + 50px;
}
}
#cb30:checked {
~ .barDiv {
width: $add + 30px;
}
}
My current setup works individually as expected, but I want the width to be 80px when both checkboxes are checked. However, it just switches between the two widths instead. I have seen this done using LESS and I'm hoping there's a way to achieve this using SCSS as well. Any help on this would be greatly appreciated. Thank you!