18041 sujets

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

Faire apparaître une div au clic

Bonjour,

Je cherche à faire apparaître une div lorsque l'on clique sur une image...
J'ai trouvé la solution à mon problème dans un topic clos...

Zelalsan a écrit :
Salut, [...]
Si non Un exemple simple.


J'ai donc tenté "l'exemple simple" mais ça ne fonctionne pas et je ne comprends pas pourquoi... Cela fait une heure que je suis dessus à m'arracher les cheveux...

Pourriez-vous m'aider ? Me dire ce qui ne va pas dans mon code, s'il vous plait ?

Voici mon code :

HTML : 
<div id="visit1"> <img class="photo" src="summer.jpg" />
	<SPAN style="position: absolute; top: 199px; left: 14px; width: 30px; height: 30px">
	<a href="#"><img class="plus" src="bouton-plus.jpg" border="0"/> </a>  </SPAN>
	<div id="divbouton">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.
	 </div>
	</div>


CSS : 

#visit1{
	width:45%;
	height:230px;
	background-color:#A9BCF5;
	margin-top: 12px;
	margin-left: 25px;
	position: relative;
	float:left;
	display:inline-block;
	}

#divbouton {
	overflow: hidden;
	height: 0;
	margin-top: 10px;
	color:#fff; 
	background:#666; 
	transition: height .4s ease;
	}


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

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 si quelqu'un peut me venir en aide...
Bonne soirée[/i][/i]

EDIT : Déjà j'avais pas mis le code avant le html... Mais ça ne marche toujours pas.
Modifié par Mushu06 (12 Jul 2014 - 19:50)
salut,
c'est parce que le code est directement lié au HTML et n'est pas du tout flexible. Il faut respecter un certain ordre pour que ça marche.
On pourrait faire autrement (et sûrement avec des tas de façons différents) en ajoutant un attribut "data-toShow" par exemple, qu'on récupérerait et on afficherait l'élément possédant l'ID qu'indique cet attribut.
Un autre "exemple simple".
Bonjour et merci !

J'ai essayé, la div n'apparaît pas...

Mais j'ai remarqué que le "data-toShow" dans le code html ne se colore pas comme src= ou alt= :
<a href="#"><img src="bouton-plus.jpg" alt="Plus" data-toShow="divbouton" border="0"/> </a>

Question bête... Le script doit bien être dans une balise <script> dans le head ?
Salut, pas compliquer
et tu peux même le faire de façon encore plus simple !!!

je m'explique , dans ta balise <a></a> qui contient ton image tu peux mettre un onclick !

dans ce onlick tu peux mettre du javascript ! et ce javascript va rendre visible ta div (qui aura la propripété visible = hidden

<div id="divbouton" [#red]style=" visibility: hidden[/#]"></div>

<a onclick="document.getElementById("divbouton").style.visibility="visible";" href=""><img/></a>"
Bonjour JuseN,

En effet ça a l'air bien plus simple !
Avec ta technique j'enlève donc tous le script précédent avec le data-to-Show etc ?

Si c'est le cas alors ça ne fonctionne pas sur ma page :

<a onclick="document.getElementById("divbouton").style.visibility="visible"; href="#">
	<img src="bouton-plus.jpg" alt="Plus" border="0"/> </a>
	
	<div id="divbouton" style="visibility: hidden"> .... </div>


Dans NotePad, le "divbouton" suivant document.getElementById ne se colore pas... Je ne comprends pas =/
fait juste attention a ta syntaxe : 
onclick="document.getElementById("divbouton").style.visibility="visible";

devrait plutôt être 
onclick="document.getElementById('divbouton').style.visibility='visible';"

++
Je viens de faire plusieurs tests avec les " ou les ' mais la div n'apparaît toujours pas.

 <a onclick="document.getElementById('divbouton')".style.visibility='visible'; href="#">
JuseN a écrit :
Salut, pas compliquer
et tu peux même le faire de façon encore plus simple !!!

Perso je ne vois pas ça comme une solution plus simple. En plus, avec ce code, l'action ne va que dans un sens (juste l'affichage) et il n'y aura pas d'animation qui se fera. Pour faire encore plus chieur, l'action par défaut du lien n'est pas annulée ce qui aura pour effet de recharger la page sur certains navigateurs. Sans parler du côté "maintenance" du code et s'il y avait plusieurs liens...
Bref, normalement l'exemple marche, si ça venait à être dans un même fichier, ça donnerait ça

<!DOCTYPE html> 
<html lang="fr-FR">
	<head>
		<meta charset="utf-8" />
		<title>Titre de la page</title>
		<style type="text/css">
#visit1{
	float:left;
	width:45%;
	height:230px;
	margin:12px 0 0 25px;
	background-color:#A9BCF5;
}

#visit1>img+span {
	position: absolute; 
	width: 30px; 
	height: 30px;
	top: 199px; 
	left: 14px; 
}

#divbouton {
	overflow: hidden;
	height: 0;
	margin-top: 10px;
	color:#fff; 
	background:#666; 
	transition: height .4s ease;
}
		</style>
	</head>	
	<body>
<div id="visit1">
	<img src="summer.jpg" alt="" class="photo" />
	<span>
		<a href="#"><img src="bouton-plus.jpg" alt="Ne pas laisser vide !" data-toShow="divbouton" /> </a>
	</span>
	<div id="divbouton">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.</div>
</div>
<script type="text/javascript">
function hideShow(e){

	(e.preventDefault) ? e.preventDefault() : (e.returnValue = false);
	
	var targetID = (e.target || e.srcElement).getAttribute("data-toShow"),
		elementToShow = document.getElementById(targetID);

	elementToShow.style.height = (elementToShow.offsetHeight == 0 ? elementToShow.scrollHeight : "0") + 'px';

}

var a = document.querySelectorAll("[data-toShow]"),
	x = 0,
	l = a.length;

for (; x<l; x++) document.addEventListener ? a[x].addEventListener("click", hideShow, false) : a[x].attachEvent("onclick", hideShow);

</script>
	</body>
</html>
Mushu06 a écrit :
Je viens de faire plusieurs tests avec les " ou les ' mais la div n'apparaît toujours pas.

 <a onclick="document.getElementById('divbouton')".style.visibility='visible'; href="&quot;"

hmmm je repete, attention aux apostrohe simple et double 
 <a onclick="document.getElementById('divbouton').style.visibility='visible';" href="&quot;"

C'est juste pour la syntaxe.
Si tu as des difficulté a mettre en place un js et de le lier a ta page (DOM), prend le temps de lire quelques tutoriels de bases sur le javascript , html et css. Sans un minimum de connaissance de base, les simples copier coller de script , même simple, ne te seront d’aucune aides.

Le script de Zelasan est trés bon. Utilise le en adaptant au choix , le script, le css et ou ton html.
Merci beaucoup pour vos conseils !

Le script de Zelalsan fait apparaitre ma div Smiley lol
Par contre, elle apparait derrière l'image summer et se "coupe" de façon à ce qu'on ne voit pas tous le texte car elle ne fait qu'une ligne...

Comment est-ce que je peux la positionner sous le 'bouton-plus.jpg' (autrement qu'avec margin-top ?) et lui "donner une forme" pour voir l'ensemble de la div ?

Dès que je cherche à changer sa taille elle n'apparaît plus...
Sujet clos
Aller à