A voir également:
- Contenu déroulant Javascript
- Menu déroulant excel - Guide
- Telecharger javascript - Télécharger - Langages
- Word a trouvé du contenu illisible - Guide
- Javascript round ✓ - Forum Javascript
- Le fichier à télécharger correspond au contenu brut d’un courrier électronique. de quel pays a été envoyé ce message ? - Guide
3 réponses
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
17 mars 2014 à 15:59
17 mars 2014 à 15:59
Salut
on fait ca en jquery avec slideToogle()
tu inclue jquery dans la balise head
ensuite par exemple
html
<div id="ligne1">clic moi</div>
<div id="content1">contenu a afficher</div>
<div id="ligne2">clic moi</div>
<div id="content2">contenu a afficher</div>
css
#content1, #content2 {
display:none;
}
#ligne1:hover, #ligne2:hover {
cursor:pointer;
}
le code jquey (après la balise <body>)
<script>
$(document).ready(function() {
$("#ligne1").click(function(){
$("#content1").slideToggle('slow');
});
$("#ligne2").click(function(){
$("#content2").slideToggle('slow');
});
})
</script>
voila c'est le principe après tu mets en forme un peu mieux avec css
on fait ca en jquery avec slideToogle()
tu inclue jquery dans la balise head
ensuite par exemple
html
<div id="ligne1">clic moi</div>
<div id="content1">contenu a afficher</div>
<div id="ligne2">clic moi</div>
<div id="content2">contenu a afficher</div>
css
#content1, #content2 {
display:none;
}
#ligne1:hover, #ligne2:hover {
cursor:pointer;
}
le code jquey (après la balise <body>)
<script>
$(document).ready(function() {
$("#ligne1").click(function(){
$("#content1").slideToggle('slow');
});
$("#ligne2").click(function(){
$("#content2").slideToggle('slow');
});
})
</script>
voila c'est le principe après tu mets en forme un peu mieux avec css
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
Modifié par animostab le 17/03/2014 à 17:04
Modifié par animostab le 17/03/2014 à 17:04
escuse j'avais pas vu que ce se fermait a chaque autre ouverture alors voila la truc
intégrer jquery comme precedemment
le css (avec petite mise en forme)
.content {
width:400px;
}
.resultat {
display: none;
border:1px solid red;
background-color:white;
margin:10px;
}
.content h1:active .resultat {
display: block;
}
.content h1:hover {
cursor:pointer;
color:white;
background-color:#000000;
}
.content h1 {
margin:10px;
color:black;
background-color:#CCCCCC;
}
le html
<div class="content">
<h1>click me</h1>
<div class="resultat">je suis la</div>
<h1>click me</h1>
<div class="resultat">c'est autre cose</div>
<h1>click me</h1>
<div class="resultat">je suis ici</div>
<h1>click me</h1>
<div class="resultat">je vais mettre une photo la</div>
</div>
le jquery (après <body>)
<script>
$(document).ready(function(){
$(".content h1").click(function(){
$(".content .resultat").slideUp();
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
}
})
})
</script>
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
intégrer jquery comme precedemment
le css (avec petite mise en forme)
.content {
width:400px;
}
.resultat {
display: none;
border:1px solid red;
background-color:white;
margin:10px;
}
.content h1:active .resultat {
display: block;
}
.content h1:hover {
cursor:pointer;
color:white;
background-color:#000000;
}
.content h1 {
margin:10px;
color:black;
background-color:#CCCCCC;
}
le html
<div class="content">
<h1>click me</h1>
<div class="resultat">je suis la</div>
<h1>click me</h1>
<div class="resultat">c'est autre cose</div>
<h1>click me</h1>
<div class="resultat">je suis ici</div>
<h1>click me</h1>
<div class="resultat">je vais mettre une photo la</div>
</div>
le jquery (après <body>)
<script>
$(document).ready(function(){
$(".content h1").click(function(){
$(".content .resultat").slideUp();
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
}
})
})
</script>
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
Impeccable, ça fonctionne nickel un grand merci ! Une reco. pour l'appel de la bibliothèque ? j'ai tenté Google API mais ça ne fonctionne pas... Je vais fouiller le net pour obtenir des petits cours pour débutant sur ce langage qui a l'air vraiment puissant! Merci Encore :)
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
19 mars 2014 à 11:10
19 mars 2014 à 11:10
le mieux pour intégrer la bibliothèque jquery c'est de la télécharger et de l'avoir directement sur son serveur (c'est plus sur)
