11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
Je viens vers vous car là je ne sais trop comment m'y prendre, ni par où commencer.
Mon problème est le suivant :
Je souhaiterais créer un événement permettant de rajouter une div en dessous, ça j'y arrive sans problème.
Je souhaiterais, et c'est là que je bloque, que je puisse en recliquant sur cette div la refermer ensuite, comme un interrupteur.

Avec un code ça sera plus simple.
<body>
    <div id="supercentral">
    <div id="central">
        <div id="bloc1">A propos de moi</div>
        
    </div>
        </div>
    <script type="text/javascript">
        function alerterouge() {

            var newBoite = document.createElement('div');
            newBoite.id = 'sousboite1';
            var bouton1 = document.getElementById('bloc1');
            document.getElementById('supercentral').appendChild(newBoite);
            var newBoiteText = document.createTextNode("Voilà un code html de toute beauté");
            newBoite.appendChild(newBoiteText);
            bouton1.removeEventListener('click', alerterouge, false);
        }

        function addition() {
            var bouton1 = document.getElementById('bloc1');

            bouton1.addEventListener('click', alerterouge, false);
                }
        function addition2 ()
        {
            var bouton2 =document.getElementById('bloc2');
            
        }
        addition();


Avec ce code, la boite "newboite" est bien créé, elle s'affiche bien. Cependant, lors d'un clic à nouveau sur le bloc1, je souhaiterais que la "newboite" disparaisse. Et c'est pour cela que je viens vers vous pour savoir par où commencer. Une boucle, un if je sais plus trop...
Une bonne âme pour aiguiller un débutant...
Merci
Squeek