11484 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Faire apparaître/disparaître des div successivement

Bonjour

J'aimerais pouvoir faire apparaître et disparaître des divs ainsi que le bouton associé a l'apparition/disparition de la div.
Je vais essayer d'être le plus clair possible.

- Je débute en Javascript et php.
- J'ai cru comprendre que le problème que je rencontre se règle en Javascript.
- Je travaille actuellement sur une page en .php dont l'affichage est dépendant d'un id de session.

Problème n°1
J'aimerais utiliser un bouton de type "START" pour ouvrir une première Div(1).
Je voudrais que ce bouton "START" disparaisse une fois la div ouverte.
Je voudrais qu'un nouveau bouton "SUIVANT(1)" apparaisse une fois le bouton "START" disparu.
Je voudrais que le bouton "SUIVANT(1)" ouvre une seconde Div(2).
Puis que le bouton "SUIVANT(1) disparaisse pour laisser apparaître un bouton "SUIVANT(2)" qui ouvrira une troisième Div(3).
Ainsi de suite.

Problème n°2
J'aimerais qu'en arrivant sur la page une première div(1) soit chargée et qu'en cliquant sur un bouton(1) interne a cette div cela fasse charger une div(2) avec un bouton(2) et ainsi de suite.

Pour le moment j'ai un code qui me permet seulement de cacher/montrer une div avec un bouton qui ne bouge pas.
<script type="text/javascript">
   
	function visible() // Je declare ma fonction avec un id a définir
	{
		var visi = document.getElementByClassName('button').style;

		if ((visi.display == 'block') || (visi.display == '')) // Si l'élément est en display block
		{
			visi.display = 'none'; // exe la fonction hideThis pour le faire devenir un display none
		}
		else
		{
			visi.display = 'block';
		}
	}
</script>


Merci d'avance Smiley confused
Il suffit de créer une classe en CSS "visible" et "invisible"

et puis sur chaque click sur le bouton start / suivant tu addClass() visible ou invisible suivant le contexte.. avec tes if quoi..
Administrateur
Bonjour,

Yep, gérer une classe évite entre autres d'appliquer display: block; à un élément qui était en fait inline ou inline-block ou table ou va savoir mais pas forcément block…

As-tu déjà le code HTML que tu penses être suffisant pour ton problème ? Les boutons, les div avec leurs classes ou id pour les distinguer…
Salut,

En effet cela peut se régler en javascript (on doit pouvoir imaginer des solutions en full css avec des checkbox qui affiche/cache les éléments voulus (exemple relativement simple : http://css-workshop.com/css-show-hide-div-without-javascript/ ) mais on va éviter de trop se compliquer, tu regarderas ça pour ta culture perso pour une prochaine fois Smiley langue )

Je n'ai pas testé, mais j'ai l'impression que ton code ne devrait pas fonctionner Smiley ohwell
Soit tu fais du document.getElementById et tu obtiens un élément unique que tu peux utiliser directement, soit tu fais du getElementsByClassName et tu obtiens un tableau et il faut donc parcourir chaque élément du tableau, ce que tu n'as pas l'air de faire.


Première étape : j'aurai tendance à crée une class en css qui va te permettre de cacher les éléments. L'avantage sera qu'il sera ensuite très simple en javascript de passer d'un état à l'autre avec un simple toggle. 
.cache {
    display:none;
}


Du coup en javascript on pourra faire assez simplement un 
document.getElementById("div1").classList.toggle("cache");
pour mettre/enlever la class qui cache l’élément.

Ensuite il ne reste plus qu'à écrire le html et mettre un bouton pour appeler le javascript.
(Essayes de ne pas regarder directement les solution pour faire l'effort "d'assembler les pièces") Logiquement tu devrais assez facilement arriver à un résultat équivalent : https://jsfiddle.net/bfwuvp24/ (j'ai mis le bouton à l’intérieur du div à cacher pour correspondre à ta demande, on peut le mettre à l’extérieur pour être sur que le toggle marche dans les 2 sens)

Une fois que tu as vérifié qu'elle fonctionne , adapter un peu pour cacher un élément et en afficher un autre pour arriver à ça : https://jsfiddle.net/bfwuvp24/1/

Ensuite mettre une fonction à la place des bouts de code trop ressemblant pour obtenir un résultat équivalent à ça : https://jsfiddle.net/bfwuvp24/2/

Cela me semble la solution la plus simple qui permette facilement de faire une séquence claire "qui on cache et qui on affiche"

Après on pourrait imaginer diverses solutions pour passer moins de paramètres, mais cela sera un peu plus contraignant sur la façon de gérer les id : https://jsfiddle.net/bfwuvp24/3/
ou la structure : https://jsfiddle.net/bfwuvp24/4/

Bon courage Smiley cligne

Edit : J'avais oublié d'envoyer ma réponse, du coup j'ai complété avec 2 petites pistes possibles et au final y a 2 réponses entre temps Smiley sweatdrop
Modifié par Mathieuu (20 Feb 2020 - 11:30)
Meilleure solution
Merci BEAUCOUP a vous tous ! Smiley biggrin Smiley biggrin Smiley biggrin

Le code proposé par Matthieuu fonctionne parfaitement pour le rendu que je voulais !
J'ai du suivre un tuto sur le fonctionnement d'Ajax pour que ma page ne se recharge pas a chaque fois mais une fois l'Ajax mis en place tout fonctionne comme sur des roulettes !

Merci encore pour votre aide ! Smiley merci
Sujet clos
Aller à