Pouvons-nous afficher/masquer différents contenus dans un div sans utiliser la méthode Select mais simplement avec un clic de souris ?

Question

Est-il possible d'afficher/masquer différents contenus dans un div sans utiliser la méthode Select mais simplement avec un clic de souris sur le div ?

Par exemple :

.inv{
  display: none;
}

<div class="inv">
 
  <div> Option 1 </div>
  <div> Option 2 </div>
  <div> Option 3 </div>
 
  <div class="inv">Content 1</div>
  <div class="inv">Content 2</div>
  <div class="inv">Content 3</div>

</div>

Si je clique sur le div "Option 1", tout s'affiche dans "Contenu 1"

Option 1 -> Contenu 1

Est-ce possible ?

Answer 1

Pour faire cela strictement sans utiliser JavaScript, vous pouvez utiliser une case à cocher avec un label, mais vous devez modifier le label :

.inv {
  display: none;
}

label{
  display: block;
}

input {
  display: none;
}

input:checked + .inv{
  display: block !important;
}

 Option 1 
 Option 2 
 Option 3 


Content 1

Content 2

Content 3

Si vous ne souhaitez pas apporter trop de modifications au balisage actuel, vous devez utiliser JS. L'exemple suivant utilise l'attribut data pour identifier les commutateurs d'éléments.

$('div[data-for]').click(function() {
  $(`.inv[data-id="${this.dataset.for}"]`).toggle()
})

.inv {
  display: none;
}

sssccc
 Option 1 
 Option 2 
 Option 3 

Content 1
Content 2
Content 3