Je cherche à créer un DIV coulissant, comme celui ici lorsque vous appuyez sur "Contact". Quelqu'un sait-il quelque chose de similaire à cela?
6 réponses
L'utilisation de la méthode slideToggle()
de jQuery pourrait vous y aider.
HTML:
<div id="contact">
Contact me!
</div>
<a href="#" id="toggle">Contact</a>
CSS:
#contact
{
display: none;
background: grey;
color: #FFF;
padding: 10px;
}
JavaScript:
$(function()
{
$("a#toggle").click(function()
{
$("#contact").slideToggle();
return false;
});
});
Si vous ne souhaitez pas utiliser jQuery et que vous pouvez vous en tenir aux navigateurs modernes, vous pouvez essayer:
Démo: http://jsfiddle.net/ThinkingStiff/EVyE8/
HTML:
<div id="slide">click me</div>
CSS:
#slide {
height: 50px;
transition: height 500ms ease;
-moz-transition: height 500ms ease;
-ms-transition: height 500ms ease;
-o-transition: height 500ms ease;
-webkit-transition: height 500ms ease;
}
Scénario:
document.getElementById( 'slide' ).addEventListener( 'click', function() {
this.style.height == '50px' || this.style.height == ''
? this.style.height = '150px'
: this.style.height = '50px';
}, false );
Un autre échantillon
Échantillon
HTML
<div id="slide">
Slide content<br />
Slide content<br />
Slide content<br />
</div>
<div id="content">
Content<br />
Content<br />
Content<br />
</div>
<button id="slide_button">Slide it</button>
CSS
#content {
background-color: #c0c0c0;
border: 1px solid blue;
}
#slide {
border: 1px solid red;
background-color: #000;
color: #fff;
overflow: hidden;
}
JS
$('#slide_button').click(function() {
$('#slide').animate({
height: 'toggle'
}, 1500, function() {
});
});
Le tout-puissant jQuery vient à la rescousse, encore une fois.
Si vous ne voulez pas utiliser jquery, réglez simplement une minuterie et augmentez la hauteur.
Encore un autre exemple, mais sans jquery, et avec une approche d'ajout / suppression de classe :)
Démo: http://jsfiddle.net/1wbh8pqj/
L'idée principale est que vous avez deux classes, l'une s'applique au curseur et l'autre, indique comment le curseur doit s'afficher lorsqu'il est développé.
.slider {
height: 0px;
overflow: hidden;
transition: height 0.5s ease;
-moz-transition: height 0.5s ease;
-ms-transition: height 0.5s ease;
-o-transition: height 0.5s ease;
-webkit-transition: height 0.5s ease;
}
.slided {
height: 100px;
}
Donc, vous devez définir la classe 'slided' sur le curseur quand elle doit être développée, et la supprimer lorsque le curseur doit être rétréci, et en utilisant la transition CSS super-méga-uber-génial, la hauteur changera en douceur :)
var expander = document.getElementById("expander");
expander.addEventListener("click", function () {
var slider = document.getElementsByClassName("slider")[0];
if (slider.classList.contains("slided")) {
slider.classList.remove("slided");
} else {
slider.classList.add("slided");
}
});
Ohbtw, le html:
<div class="slider">i am teh slidah!! :D</div>
<div class="content">and i am the content XD</div>
<div id="expander">click me to expand/hide the slidah! :O</div>
Avec jQuery, vous faites le div et ajoutez l'affichage: aucun avec css. Ensuite, quelque chose comme:
$('.button').click(function(e){
e.preventDefault();
$('#mydiv').slideToggle();
});
Questions connexes
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.