So, I want to make a gallery on a website that does not allow Javascript, so I wasn't sure how to approach this. Say I have four categories: Sketches, Lineart, Cell Shaded and Painted. I want these four to be toggle buttons.
Then, I would code the gallery so that all my works initially showed, and once one of the toggles was clicked, everything other than the applicable works would show.
Sketch | Sketch | Cell | Lineart
Lineart | Sketch | Cell | Sketch
Click sketch, and then it would just have the four sketches showing side by side. It would also be neat to be able to apply two different categories to work, in case I change the categories, so some assistance on how I could apply two things ( like, putting male and female as categories, and then tagging a picture with two+ people as both ) would be appreciated as well.
This was a good example of what I was going for, but it uses JS.
Here you go @Tasuya Suou. Hopefully this helps you. I used the general ~ selector. You can read more about it here. https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors.
p {
display: none;
}
input[value="fruit"]:checked~p.fruit,
input[value="veg"]:checked~p.veg,
input[value="nuts"]:checked~p.nuts,
input[value="drink"]:checked~p.drink {
display: block;
}
input:checked+label {
color: blue;
}<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="style/css" href="./index.css" />
</head>
<body>
<input type="radio" id="fruit" name="product" value="fruit" />
<label for="fruit">Fruit</label>
<input type="radio" id="veg" name="product" value="veg" checked />
<label for="veg">Veg</label>
<input type="radio" id="nuts" name="product" value="nuts" />
<label for="nuts">Nuts</label>
<input type="radio" id="drink" name="product" value="drink" />
<label for="drink">Drink</label>
<p class="fruit veg nuts drink">Product 1</p>
<p class="drink">Product 2</p>
<p class="veg nuts drink">Product 3</p>
<p class="veg nuts">Product 4</p>
</body>
</html>