Show - Hide div en inline-block

En utilisant la fonction slideToggle, il faut déclarer notre div display: none dans notre feuille de style et quand on click sur le bouton, jQuery affiche la div en block. Mais comment faire si on veut notre div en inline-block ? Utilisez la méthode suivante :

.div {
display: inline-block;
}
$('.div').hide();

$('.bouton').bind('click', function() {
    $('.div').slideToggle( '1000','linear' );
    return false;
    $(this).text($(this).text() == "Ouvrir" ? "Fermer" : "Ouvrir"); // texte du bouton - optionnel
})

Lire la suite

Show - hide div avec jQuery

jqueryIl y a quelques années j'ai cherché une solution pour masquer des contenus, puis les afficher en défilant en douceur (smoothly) en cliquant sur un bouton sans quitter la page. J'ai trouvé une solution de masquage appelé "Peekaboo" (coup d'oeil ou coucou) avec Flash mais avec le temps passé, j'abandonne Flash à cause des problèmes cumulés. Enfin, jQuery a porté une solution très simple et ce javascript est très léger.

Je vous montre deux sortes de fonction : montrer/cacher les contenus individuellement ou montrer/cacher les contenus de tous les "div" en même temps.

Lire la suite