Je cherche à créer un DIV coulissant, comme celui ici lorsque vous appuyez sur "Contact". Quelqu'un sait-il quelque chose de similaire à cela?

13
Earl Larson 12 nov. 2011 à 03:46

6 réponses

Meilleure réponse

L'utilisation de la méthode slideToggle() de jQuery pourrait vous y aider.

Exemple

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;
     }); 
});
15
Tim Cooper 11 nov. 2011 à 23:52

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 );
13
ThinkingStiff 8 déc. 2011 à 23:48

Un autre échantillon

Échantillon

http://jsfiddle.net/9cdYR/

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() {
    });
});
2
Smamatti 11 nov. 2011 à 23:59

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.

0
Dhaivat Pandya 11 nov. 2011 à 23:49

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>
6
Bengalaa 25 juil. 2016 à 12:40

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();
});
1
ezakto 11 nov. 2011 à 23:51
8101284