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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 (
id="{!! $family->id !!}"
), mais non de faire des actions sur les articles liés à ces boutons(
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,