Afficher/cacher des éléments avec propriété CSS "active"

**pierrot547000** · 28/11/2018, 11h41

Bonjour,

Je dois réaliser un mini-projet dont une partie consister à cacher/afficher des éléments en fonction de la propriété "active" d'une balise.

===>
CONCRÈTEMENT, voici le cas simple.

J'ai 10 éléments. La moitié possède la classe "special" et l'autre moitié possède la classe "normal".

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<div id="conteneur">
    <div class="element special"></div>
    <div class="element normal"></div>
    <div class="element special"></div>
    <div class="element normal"></div>
    <div class="element special"></div>
    <div class="element normal"></div>
    <div class="element special"></div>
    <div class="element normal"></div>
    <div class="element special"></div>
    <div class="element normal"></div>
</div>

Ce que j'aimerais faire, c'est avoir deux boutons qui permettent d'afficher/cacher des éléments. Concrètement, je veux ça :
- Bouton 1 : quand je clique dessus, j'affiche tous les "special" et je cache tous les "normal"
- Bouton 2 : quand je clique dessus, j'affiche tous les "normal" et je cache tous les "special"

Seulement la difficulté est la suivante, je ne dois pas utiliser le JavaScript. Uniquement du HTML et du CSS. J'ai bien pensé à me servir de la propriété CSS "active", mais j'ignore comment procéder pour mon problème.

Merci d'avance pour vos aides

**psychadelic** · 28/11/2018, 12h44

faut que tu regarde du coté du sélecteur css ~ ( tilde ) => https://developer.mozilla.org/fr/doc...%A9n%C3%A9raux

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>spe nor css</title>
  </script>
  <style type="text/css">
    #conteneur { margin: 20px }
      #conteneur div {
      display: block;
      width : 400px;
      height: 30px;
      line-height: 25px;
      text-align: center;
    }
    .special { background-color: #d4986f }
    .normal { background-color: #d6d591 }
    button {margin: 5px;}
    button#special:active ~ div.special { display: none }
    button#normal:active ~ div.normal { display: none }
  </style>
</head>
<body>
  <div id="conteneur">
    <button id="special"> efface special</button>
    <button id="normal"> efface normal</button>
    <div class="special" tabindex="0"> special </div>
    <div class="normal"  tabindex="0"> normal </div>
    <div class="special" tabindex="0"> special </div>
    <div class="normal"  tabindex="0"> normal </div>
    <div class="special" tabindex="0"> special </div>
    <div class="normal"  tabindex="0"> normal </div>
    <div class="special" tabindex="0"> special </div>
    <div class="normal"  tabindex="0"> normal </div>
    <div class="special" tabindex="0"> special </div>
    <div class="normal"  tabindex="0"> normal </div>
</div>
</body>
</html>

Afficher/cacher des éléments avec propriété CSS "active"

CSS

Discussions similaires

Partager

Partager