18015 sujets

Questions générales et questions de débutants

Script pour faire apparaitre et disparaitre une div en cliquant

Pages :
Bonjour à la communauté!!

Je suis en train de réaliser une page ou j'ai besoin d'utiliser un script assez leger qui à pour but de faire apparaitre et disparaitre une div lorsque l'on clique sur une image!

Voici un script qui se rapproche a peu près de ce que je veux réaliser!


<script>
function vaEtVient(){
		if(document.getElementById('invisible').style.display == 'none'){
    	document.getElementById('invisible').style.display = 'block';
  		}
  		else {
    	document.getElementById('invisible').style.display = 'none';
		}
}
</script>


<body>

<a href='javascript: vaEtVient()'>Affiches-moi</a><br>

<div style='display:none;' id='invisible'>
Mon Contenu caché
</div>

</body>


Le problème de ce script, c'est qu'il ne fonctionne que pour un élément, hors, j'aimerais qu'il fonctionne pour chaque vignette de ma page. En utilisant peut-être des div class="" plutot que des div id="".

De plus, si c'est possible que cette div se déroule, je sais que cette fonction compliquera un peu plus le script mais ca serait au top du top! Je rappelle également qu'à l'état initiale la div est caché et qu'il faut cliquer pour qu'elle apparaisse.

Voila, je sais que ca fait beaucoup de question d'un coup mais j'ai besoin de vous plus que jamais car je suis en train de m'arracher les cheveux avec le peu de connaissances que j'ai en javascript!

Merci d'avance, en esperant avoir poster au bon endroit du forum.
Premier point : si tu veux que ton script s'applique à plusieurs éléments, il faut effectivement utiliser une classe et non un id dont le principe même est d'être unique.

Pour ce qui est du déroulement, si ce n'est pas fondamental, ou en fonction des navigateurs que tu souhaites supporter, tu peux largement simplifier ton code en utilisant les transitions css3, qui ne seront pas supportées par tous les navigateurs, mais les plus récents le supporteront.

Ensuite, au lieu de display, tu passes par la propriété height, qui sera transitionnée, de façon à ce que la hauteur passe de 0 (caché) à auto (taille normale du bloc).

Un peu de lecture :

* CSS3 transitions http://blogs.msdn.com/b/eternalcoding/archive/2011/11/01/css3-transitions.aspx


Ensuite si tu veux aller plus loin, tu peux penser à améliorer ton script. Il y a plusieurs points qui pèchent.

<a href='javascript: vaEtVient()'>Affiches-moi</a>


Certes ça marche, mais c'est assez dur à maintenir comme code. L'idéal serait d'utiliser une classe et ensuite dans ton script JS d'écouter l'événement click sur tous les éléments qui ont cette classe et appeller ta fonction.

https://developer.mozilla.org/en-US/docs/Web/API/element.onclick

Ensuite, ton code est directement dans ta balise script. En soit ce n'est pas vraiment un problème ici, surtout si tu n'utilises pas de plugins, librairies ou autre, mais en général on évite. Si jamais un autre script venait à déclarer une fonction vaEtVient de la même façon, la mauvaise fonction serait utilisée parce que toutes ces fonctions sont dans le même namespace.

Pour cela tu peux utiliser ce qu'on appelle des closures : http://markdalgleish.com/2011/03/self-executing-anonymous-functions/
merci pour ces réponses!

J'en demande peut être trop, mais je veux bien si vous le pouvez transformer le petit code que j'ai présenté dans mon premier post pour que je comprenne mieux avec l'utilisation des class à la place des div, le déplacement en css ou en javascript!

ca serait super sympa, déjà merci en tout les cas!
Salut,
Pour l'affichage du div c'est assez simple mais pour l'animation c'est relativement embêtant.
Il faut savoir déjà qu'il n'y a pas de transitions passant d'une hauteur nulle à une hauteur automatique, il faudra donc soit spécifier une hauteur d'affichage fixe (si tu connais la taille des div et qu'elle ne variera pas) soit passer par JS pour donner la taille. Cela dit, tu priveras tous les navigateurs qui ne reconnaissent pas de la propriété transition en CSS, notamment IE9.
C'est plutôt simple une animation en JS pure mais il faudra prendre en compte les styles que tu as appliqué à tes div (bordures, padding...). Perso, si tu n'as que cette animation, je pense que ça sera assez lourd d'utiliser JQuery.
Si non Un exemple simple.
Smiley biggrin Je t'en prie. Mais ne t'emballe pas trop car elle se base sur les transitions CSS et ne marchera donc pas sur les anciens navigateurs.
C'est pas grave! Smiley smile
une dernière chose, si j'attribue à la div qui apparait au click un attribut class="contenu" comme ci-dessous : 

<a href="#" class="MaClasse">Affiche-moi</a>
<div class="contenu">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl lectus, consequat eget iaculis nec, cursus a metus. In eros massa, tincidunt vel dolor eu, rutrum laoreet nibh. Ut bibendum massa sed consequat ultricies. Duis sed ante quis odio mattis ornare. In vitae quam a est aliquam aliquet non vel purus. Praesent condimentum nibh odio, et condimentum odio interdum ut. Nunc mattis viverra ipsum ut venenatis. Nulla facilisi. Vestibulum rhoncus imperdiet tortor sit amet ultricies. Suspendisse fringilla et neque eu fringilla. Integer eu erat quis purus tincidunt blandit vel eu quam. Aliquam iaculis egestas laoreet. Phasellus commodo accumsan gravida. Nunc cursus laoreet dolor id congue. </div>


qu'est ce que je dois changer dans mon code javascript pour que ca fonctionne??

var a = document.querySelectorAll(".MaClasse");

function hideShow(e){
    (e.preventDefault) ? e.preventDefault() : (e.returnValue = false);
    var cur = e.target || e.srcElement,
        div = (cur.nextSibling.nodeType!==3) ? cur.nextSibling : cur.nextSibling.nextSibling;
	div.style.height = ((div.offsetHeight==0) ? div.scrollHeight : "0") + 'px';
}

for (var i=0, l=a.length; i<l; i++){
    document.addEventListener ? a[i].addEventListener("click", hideShow, false) : a[i].attachEvent("onclick", hideShow);
}


Merci d'avance et après j'arrete de vous embêter![/i][/i]
Bin rien. Pour que ça marche il faut qu'il n'y ait aucun élément entre le <a> et le <div>. Si tu changes "MaClasse" tu dois aussi la changer dans le script.
PS: c'est uniquement l'animation qui ne marchera pas.
Modifié par Zelalsan (17 Jun 2013 - 17:01)
J'ai un problème car j'ai l'impression que ce code ne fonctionne pas si à l'intérieur du <a href="">, on introduit des div avec des images à l'intérieur, voici mon code : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<a href="#" class="click">
	<div class="cell">
		<img class="picture" src="http://lindsayolson.com/wp-content/uploads/2013/03/grfcc.jpg" title="Lorem Ipsum" />
		<h1>/ LOREM&nbsp;</br>&nbsp;IPSUM /</h1>
	</div>
</a>
			
<div class="contenu">
	<h2>Texte qui doit apparaitre</h2></br>
</div>


<script>
var a = document.querySelectorAll(".click");

function hideShow(e){
    (e.preventDefault) ? e.preventDefault() : (e.returnValue = false);
    var cur = e.target || e.srcElement,
        div = (cur.nextSibling.nodeType!==3) ? cur.nextSibling : cur.nextSibling.nextSibling;
	div.style.height = ((div.offsetHeight==0) ? div.scrollHeight : "0") + 'px';
}

for (var i=0, l=a.length; i<l; i++){
    document.addEventListener ? a[i].addEventListener("click", hideShow, false) : a[i].attachEvent("onclick", hideShow);
}
</script>


<style>
div .contenu {
	overflow: hidden;
	height: 0;margin-top: 10px;
	color:#fff;
	background:#666;
	transition: height .4s ease;
}
.cell {
	width: 300px;
	height: auto;
	float: left;
}
.picture{
	width: 100%;
	height: auto;
}
h1{
	font-size: 25px;
	padding:2px;
	margin:0;
	color: #FFF;
	text-transform:uppercase;
	text-decoration:none;
	background-color: #60ff00;
	display: inline;
	opacity:0.95;
	line-height: 34px;
	font-weight:600;
	z-index: 1;
}
</style>


En gros, j'aimerais que tout ce qui est contenu dans mon <a href="click"> soit cliquable pour faire apparaitre la <div class="contenu">.
Voir même si possible que la <div class="contenu", une fois déroulée, soit cliquable si l'on souhaite refaire disparaitre la div.
Je ne sais pas si le code java actuel suffit à ca!
Merci encore, je suis un peu redondant mais je sens que je suis pas loin de toucher le but grâce à vous!!
merci bcp[/i][/i]
Dans ce cas le code changerait. Je ne sais pas ce que ça donnerait mais change "nextSibling" par "firstChild"
Je suis une quiche en JavaScript (entre autre chose Smiley lol ), mais en XHTML 1.0 Transitional, pas de div ni de h1 tu ne mettras dans un lien Smiley cligne
6l20 a écrit :
Je suis une quiche en JavaScript (entre autre chose Smiley lol ), mais en XHTML 1.0 Transitional, pas de div ni de h1 tu ne mettras dans un lien Smiley cligne


Même qu'un lien qui n'est pas un lien et sert juste à déclencher une action JS ne devrait pas être un lien et ça dans n'importe quelle version de (X)HTML. Smiley cligne
tshinkiz a écrit :
Faites pété une solution en code, parce que ce ne m'aide pas tellement juste des mots Smiley cligne


Avec jQuery : http://codepen.io/jb_gfx/pen/weDHf

C'est propre et net et ça fonctionne dans tous les navigateurs, en 4 lignes de code.
Modifié par jb_gfx (17 Jun 2013 - 19:40)
a écrit :
C'est propre et net et ça fonctionne dans tous les navigateurs, en 4 lignes de code.

Plutôt 6004 lignes Smiley lol Smiley langue . C'est sûr que ça marche mais perso, comme je l'ai dit, utiliser JQuery pour cette seule animation me paraît un peu lourd. M'enfin...
Zelalsan a écrit :

Plutôt 6004 lignes Smiley lol Smiley langue . C'est sûr que ça marche mais perso, comme je l'ai dit, utiliser JQuery pour cette seule animation me paraît un peu lourd. M'enfin...


De par mon expérience personnelle je dirais que 99.9% des gens qui ne recommandent pas jQuery à cause de ses énormes 30ko (soit 1 tiers de seconde de téléchargement par site en 3G, parsing inclut) ne savent pas coder en JS. Les 0.1% qui restent sont des leetos qui ont trop de temps libre et pas d'impératifs de production.
Modifié par jb_gfx (18 Jun 2013 - 00:40)
jb_gfx, avec le code que tu m'as envoyé, qui m'a considérablement aidé (merci beaucoup), y'a t il une solution pour faire en sorte que la div class="info-panel", une fois ouverte, serve aussi à la refermer en cliquant dessus, et pas seulement avec la div class="toggle-info".

<div class="toggle-info">
	<img src="http://dummyimage.com/100x100/000/fff" title="Lorem Ipsum" />
	<h1>Title</h1>
</div>
			
<div class="info-panel">
	<h2>Texte qui doit apparaitre</h2>
</div>


.toggle-info {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: block;
}

.info-panel {
  display: none;
}


$(function() {
  $(".toggle-info").on("click", function() {
    $(this).next(".info-panel").slideToggle(200);
  });
});


J'espere que mon explication est assez claire! Smiley smile
merci beaucoup en tout les cas!
Pages :
Sujet clos
Aller à