Contenu déroulant Javascript
titanium00
-
titanium00 -
titanium00 -
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 ?
A voir également:
- Contenu déroulant Javascript
- Menu déroulant excel - Guide
- Word a trouvé du contenu illisible - Guide
- Telecharger javascript - Télécharger - Langages
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
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
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.
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.