Contenu déroulant Javascript
Bonjour,
Totalement débutant dans le codage Javascript, je souhaite refaire un élément javascript permettant de présenter du contenu dan un menu déroulant comme celui-ci :
http://www.google.fr/about/company/
J'ai commencé à faire quelque chose qui donne ceci :
<script type="text/javascript">
function look(idx)
{
var sd=document.getElementById(idx).style;
sd.display=sd.display=='inline'?"none":"inline";
}
</script>
<a href="javascript:void(look('Text1Depliant'));">Exemple #1</a><br/>
<div id="Text1Depliant"
style="display:none">
Content #1
</div>
Mais ce n'est pas tout à fait la même chose...Auriez-vous une idée ?
Totalement débutant dans le codage Javascript, je souhaite refaire un élément javascript permettant de présenter du contenu dan un menu déroulant comme celui-ci :
http://www.google.fr/about/company/
J'ai commencé à faire quelque chose qui donne ceci :
<script type="text/javascript">
function look(idx)
{
var sd=document.getElementById(idx).style;
sd.display=sd.display=='inline'?"none":"inline";
}
</script>
<a href="javascript:void(look('Text1Depliant'));">Exemple #1</a><br/>
<div id="Text1Depliant"
style="display:none">
Content #1
</div>
Mais ce n'est pas tout à fait la même chose...Auriez-vous une idée ?
3 réponses
-
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 -
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. -
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 :)
