Untitled

/*
html
<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title> exo popup</title>

    </head>

    <body>
        <span class="bpopup">
            <p>Span 1</p>
        </span>

        <div class="fpopup">
            <p>Div 1</p>
        </div>


        <span class="bpopup">
            <p>Span 2</p>
        </span>

        <div class="fpopup">
            <p>Div 2</p>
        </div>

        <span class="bpopup">
            <p>Span 3</p>
        </span>

        <div class="fpopup">
            <p>Div 3</p>
        </div>

    </body>
*/
    <script type="text/javascript">
        var x = 0;
        window.onload = init(); // On appelle une fonction qui fait office de gestionnaire d'evenement dès que la fenêtre a fini de charger.


        function init(){
            for(i=0;i<document.getElementsByClassName('bpopup').length;i++){
                document.getElementsByClassName('fpopup')[i].style.display = "none";    // On cache les deux divs en mettant la valeur de leur display a "none"
            }
            for(i=0;i<document.getElementsByClassName('bpopup').length;i++){

                document.getElementsByClassName('bpopup')[i].addEventListener("click",function(){   // Si on détecte un clic sur le premier span...
                    document.getElementsByClassName('fpopup')[x].style.display="block"; // ... Et on change le display du premier span en "block" pour qu'il apparaisse.
                });
                x = i;
            }


        }


    </script>

</html>