ca ne s'ouvre pas :/

Si tu veux faire ça proprement utilise plutôt les event listeners, sinon remplace mes_projets par this dans ton onclick:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<div class="main">
    <h1>Articles</h1>
        <ul>
            <li onclick="show_or_not(this);"><a href="#">Mes projets</a>
                <div class="spoiler" id="mes-projets">
                    Mon article caché ! Comme le steak :D
                </div>
            </li>
            <li><a href="#">Moi :)</a></li>
        </ul>
</div>

Le truc donné en paramètre à la fonction JS sera un élément déjà, pas un ID donc pas besoin de faire document.getElementById

EDIT: j'ai fait des petites modifs de on code quand même parce qu'il était bien crado dans la hiérarchie des balises, penses à relire un cours HTML

Héhé, erreur toute simple toute bête de sémantique : tu changes la propriété visibility…mais tu fais tes tests sur display. Alors forcément, rien ne change.

Par contre, utilise des titres (pour le sujet, je précise) plus précis que "ca ne s'ouvre pas :/" la prochaine fois.

Si je puis donner mon avis : styler directement avec JS, c'est moche. Je te suggère grandement d'utiliser une classe (CSS) que tu ajoutes et enlèves au gré du spoiler.

Je suis du même avis que Chaopale : c'est mieux d'appliquer une class css selon l'état que tu recherches plutôt que de changer le style dans le js. Cela rendra ton js plus lisible, ton code plus flexible et tu pourra aussi ajouter des transitions pour faire un effet d'ouverture à l'affichage du spoiler.

Personnellement pour afficher/masquer des éléments de ce genre je joue sur la taille de la div en la passant de 0 à la taille normale ce qui permet d'ajouter un effet de transition. En fait plus précisément je joue sur la propriété "maxHeight" car si on met "height:auto" l'animation css ne se fait pas.

Voici un exemple rapide :

1
2
3
4
5
6
7
8

function showSpoiler(cible){
    if(document.getElementById(cible).style.maxHeight=="0px"){
        document.getElementById(cible).style.maxHeight = "5000px";
    }
    else{
        document.getElementById(cible).style.maxHeight = "0px";
    }
}

Il te suffit de mettre en css la hauteur en auto et une durée de transition pour avoir un rendu sympa ! Je sais que ici je stylise directement via le js, mais comme je ne touche qu'une propriété de l’élément je trouve ça plus pratique que de faire 2 classes qu'on change uniquement pour faire varier une propriété.

Tu devrais aussi éviter de nommer ta fonction "s" : ce n'est pas explicite, on ne sait pas vraiment ce que fait cette fonction ! Je te conseil de toujours nommer tes fonctions de façon à savoir ce que fait une fonction en lisant son nom, par exemple ici "showSploiler" serait plus adapté !