Affichages alternatifs avec des boutons

Bonjour,



Je suis débutant en JavaScript, et je souhaiterais faire une page avec une suite de boutons qui permette d'afficher alternativement et exclusivement les différents articles liés à ces boutons, (cad si je clique sur le bouton 1, les articles liés au bouton 1 et seulement à ce bouton vont s'afficher, etc ...).

Comme il faut que j'effectue par la suite des opérations sur ces articles, je souhaiterais que les articles liés à un bouton x ne se "cachent" que lorsque j'appuie sur un bouton différent, et pas n'importe où dans la page.

J'ai codé le programme suivant (j'utilise Laravel):

Code:

---

1 2 3 4 5

@foreach($families as $family) <p><a class="family m-t-5 m-l-20" id="{!! $family->id !!}" href="#{!! $family->id !!}" onfocus="document.querySelector('#family-{!!$family->id!!}').style.display = 'block'" onblur="document.querySelector('#family- {!!$family->id!!}').style.display = 'none'"><abbr class="name-family">{!! $family->name !!}</abbr></a></p> @endforeach

---

Malheureusement, ceci ne me permet que d'afficher alternativement les boutons (

Citation:

---

id="{!! $family->id !!}"

---

), mais non de faire des actions sur les articles liés à ces boutons(

Citation:

---

id="family-{!!$family->id!!}"

---

), puisque dès que je clique en-dehors du bouton, les articles ne sont plus visibles.

Auriez-vous une idée concernant mon problème ?



En vous remerciant par avance pour votre réponse,

Bien cordialement,