0

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.

anothermh
  • 9,815
  • 3
  • 33
  • 52
Tatsuya Suou
  • 3
  • 2
  • Hi, I would like to help you here. But I need some more information. Why exactly can you not incorporate JavaScript on this website? – buildpax Nov 16 '18 at 02:21
  • Unfortunately the javascript functions are blacklisted here because people have used them to inject malicious scripts and such on this site. I've considered simply moving this particular gallery elsewhere, but if I don't have to, it makes it much easier, because my images are already all hosted there. – Tatsuya Suou Nov 16 '18 at 02:33
  • Hello, I don't think you'll be able to do this behavior, as according to [this](https://stackoverflow.com/a/13630259/9367643), as the CSS style will only be applied while the mouse is down, not after. – hyperupcall Nov 16 '18 at 02:34
  • Is it allowable to link to an external script served via CDN? If so, JavaScript is still possible. Otherwise, the answer listed below by sburke0708 seems at first glance to be a sound choice. – buildpax Nov 16 '18 at 19:53

1 Answers1

0

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>

https://codesandbox.io/s/48y9o68oz7

Stephen Burke
  • 389
  • 2
  • 13