ca ne s'ouvre pas :/

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Hello !

j'essaie de faire un spoiler pour un de mes sites, mais évidemment ca ne marche pas (aussi je suis nul en js :-° )

mon code (html):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="main">
            <h1>Articles</h1>
                <ul>
                    <li><a href="#" onclick="show_or_not(mes-projets);">Mes projets</a></li>
                        <div class="spoiler" id="mes-projets">
                            Mon article caché ! Comme le steak :D
                        </div>
                    <li><a href="#" onclick="">Moi :)</a></li>
                </ul>
        </div>

et le code js :

1
2
3
4
5
6
7
function show_or_not(id) {
    if (document.getElementById(id).style.display == 'hidden'){
        document.getElementById(id).style.visibility = 'visible';
    }else{
        document.getElementById(id).style.visibility = 'hidden';
    }
}

sauf que evidemement je dois pas savoir comment on passe correctement un argument, du coup ca peche à cet endroit (enfin je crois)

merci de votre aide :D

Ma chaine YouTube ! | Seventh, un micro langage communautaire ! | Mon projet : Unamed (en pleine reprogrammation en C++11/SFML2.4) | Mon tuto sur Pygame !

+0 -1

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

Édité par felko

Anciennement AlphaZeta

+2 -0
Auteur du sujet

hop j'ai oublié de donner ma soluc'

html

1
2
3
4
5
<div><a href="#" onclick="s('madiv');">Click !</a>
<div id="madiv">
contenu ici ...
</div>
</div>

js

1
2
3
4
5
6
7
8
9
function s(obj){
    if (document.getElementById(obj.toString()).style.visibility == 'hidden' || document.getElementById(obj.toString()).style.visibility == ''){
        document.getElementById(obj.toString()).style.visibility = 'visible';
        document.getElementById(obj.toString()).style.position = 'relative';
    }else{
        document.getElementById(obj.toString()).style.visibility = 'hidden';
        document.getElementById(obj.toString()).style.position = 'absolute';
    }
}

Ma chaine YouTube ! | Seventh, un micro langage communautaire ! | Mon projet : Unamed (en pleine reprogrammation en C++11/SFML2.4) | Mon tuto sur Pygame !

+0 -0

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é !

"Il est vraiment regrettable que tous les gens qui savent parfaitement comment diriger un pays soient trop occupés à conduire des taxis et à couper des cheveux"

+1 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte