Hiding and showing divs in pure HTML? - html

Question

I apologize if this question doesn't have the right amount of detail; I'm very new to web development and programming.
I have three buttons situated above a div, and I want to use these buttons to change the appearance of the div. It's hard to explain, so I've made a crude wireframe which I've linked in the rest of this question.
When all three buttons are selected, I want three smaller divs to appear inside my larger div, like shown below
When two of the buttons are pressed, I want it to appear like
When only one button is pressed, I want it to appear like this.
As you can see, I want the pressing (and un-pressing) of a button to toggle the presence of the smaller divs, and if possible, for the smaller divs to be resized depending on how many buttons have been selected (i.e., when two buttons are selected, the two small divs are each half the size of the larger div, etc.). I would really love if this could be done in pure HTML, without any JavaScript or libraries like jQuery.
I feel like this is a common thing to have built, as I am certain I have seen something similar before. However, I can't find any tutorials that quite match what I am looking for, and I couldn't even find existing examples (hence me making linking those pictures). I would greatly appreciate any help, especially if you could point me to some source code or to some examples.

Answer 1

It's possible to achieve in CSS using some tricks like this: https://codeburst.io/awesome-checkbox-and-radio-button-css-hacks-a8c24fb15a95
Actually, your "buttons" seem to act more like radio/checkboxes as they should remain "active"? Unless you meant they have to remain pressed, but in that case it's impossible to have them all pressed at the same time ;-)
Unfortunately, you can't achieve that purely in HTML.
Also keep in mind that a CSS solution will not be great from an accessibility point of view, because you need to style checkboxes as buttons, and there's not way to modify attributes like aria-haspopup or aria-expanded to tell screen readers when the content is changed. You could use an aria-live area as a fallback but it's always better to link the button with the content is actually "opens".
Of course you can use both to support as many devices as possible.
UPDATE: to achieve that in Javascript, you would need checkboxes too, or store the state of your buttons (one click sets the state to "clicked", another one unsets it). Each button would add or remove a class on the containing DIV. Then you can use CSS to display or hide, and also set the size of your secondary divs. Something like:
.bigdiv > div {
display: none;
}
.bigdiv.button1 > div:nth-child(1) {
display: block
}
.bigdiv.button2 > div:nth-child(2) {
display: block
}
.bigdiv.button3 > div:nth-child(3) {
display: block
}
to set the sizes, you would have to rely on the combination of buttons:
.bigdiv.button1:not(.button2, .button3) > div {
width: size when only button 1 is pressed
}
.bigdiv.button1.button2:not(.button3) > div {
width: size when only button 1 and 2 are pressed
}
.bigdiv.button1.button2.button3 > div {
width: size when button 1,2 and 3 are pressed
}
Of course you'd have to cater for all the combinations of buttons, or simplifiy the logic, count the number of button pressed, and apply extra classes to .bigdiv to indicate how many are pressed, so you can handle that easily in CSS.
As you can see, there's tons of different solutions to handle that, but a mix of JS and CSS is the best as you decouple the logic from the presentation and all your JS does is adding/removing classes.