Jquery : cacher et faire apparaitre un DIV

Je cherchais à cacher et faire apparaitre des <DIV>s en Jquery, avec un effet accordéon.

J’ai trouvé mon bonheur sur cette page. J’ai du modifier le script pour le faire correspondre à mes besoins (plusieurs div à maquer et afficher lors d’une action), mais le principe reste le même.

L’idée est dans un premier temps cacher tous les éléments avec la fonction .hide().

Ensuite rendre le div du titre cliquable ; fonction .click()

Une fois cliqué, on déclenche l’action .slideToggle (qui va afficher un élément masqué et inversement), puis cacher tous les autres div de la sélection.

Cela permet de bien réviser ses sélecteur Jquery : .next et .siblings !

Galerie d’images avec navigation Jquery

Dans le cadre d’un projet, j’avais besoin d’un slideshow en jquery efficace. J’utilise régulièrement Nivo Slider, mais là j’avais envie d’en essayer un nouveau pouvant générer les miniatures automatiquement.

Après une petite sélection des sliders existants, je suis partit sur slideViewerPro, un plugin basé sur jQuery slideViewer.

Le plugin est très facile à mettre en place dans une page simple, et n’a pas besoin d’être modifié pour fonctionner avec le framework 960.gs (parfois la grille de reset peut poser problème).

L’intégration de slideViewerPro nécessite uniquement un fichier JS et CSS (et bien sûr le fichier Jquery).

Vous pourrez ensuite customiser le CSS pour rajouter vos préférences ou effets. J’ai ajouté une ombre à l’image principale :
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;

Les options plus basiques peuvent se configurer directement dans le script d’appel : borders, couleurs, démarrage… Je vous rentrouvrez toutes les options dans la documentation. A titre informatif, voici mon script d’appel :
$(window).bind("load", function() {
$("div#my-folio-of-works").slideViewerPro({
thumbs: 6,
typo: true,
galBorderWidth: 0,
thumbsTopMargin: 10,
thumbsBorderOpacity: 0,
buttonsTextColor: "#707070",
buttonsWidth: 40,
thumbsActiveBorderOpacity: 0.8,
thumbsActiveBorderColor: "#0084ff",
typoFullOpacity: 0.9,
shuffle: true
});
});

Proudly powered by WordPress
Theme: Esquire by Matthew Buchanan.