11521 sujets

JavaScript, DOM et API Web HTML5

Jquery déplier/ replier div

Bonjour,

J’utilise le script Jquery suivant pour déplier / replier une div par clic sur une balise h2 située juste au dessus de cette div.

<script>

$(document).ready(function(){
    var $contenu = $('.toggle_container');
    $contenu.hide();
 
    $('h2.trigger').click(function(){
        $(this).toggleClass('active').next().slideToggle('slow');
        return false;
    });
     
    $('#ouvrir').click(function() {
        $contenu.show('slow');
        return false;
    });
     
    $('#fermer').click(function() {
        $contenu.hide('slow');
        return false;
    });

});

</script>


Voir : http://www.anciens-irsid.fr/page/page.php?page=accueil

Actuellement il est possible de déplier toutes les div sur clic des h2.
Je souhaiterai modifier le script de façon à n’avoir qu’une seule div dépliée correspondant à la dernière balise h2 cliquée.

Merci par avance pour votre aide.

Patrick MARA
Bonsoir. J'avais fait quelque chose de comparable pour mes propres besoins : Accordions.

Voici la fonction dans son intégralité (le code est commenté) : Accordion sur Github.

Notez la ligne de code susceptible de vous intéresser plus particulièrement :
Github#linea.

Ce qui chez vous devrait donner quelque chose comme ceci (non testé) :
$(this).siblings().removeClass( 'active' ); // Retrait de '.active' sur les éléments frères


À adapter selon vos besoins bien sûr...
Modifié par Olivier C (11 Mar 2018 - 02:56)
Bonjour Olivier,

Merci pour votre aide.
J'ai réussi à faire un accordéon avec les codes que vous m'avez communiqués, toutefois les h2 s'affiche horizontalement et non verticalement comme je le voudrai. Avez-vous une idée pour passer a un affichage vertical (voir code ci dessous).

Par contre je n'ai pas réussi à intégrer dans mon code :
$(this).siblings().removeClass( 'active' ); // Retrait de '.active' sur les éléments frères

Il est vrai que je ne suis pas un grand spécialiste du javascript et votre aide me serai précieuse.

Patrick MARA

 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accordeon</title>
</head>
<body>
<div class="accordion-js"> 
  <h2>Item 1</h2>
  <div> 
    <p>1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
      nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>
  <h2>Item 2</h2>
  <div> 
    <p>2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
      nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>
  
  <h2>Item 3</h2>
  <div> 
    <p>3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
      nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- <script src="Main.js"></script>
<script src="Themes.js"></script> -->

<script>
// -----------------------------------------------------------------------------
// @section     Accordions
// @description Menu accordéon
// -----------------------------------------------------------------------------

( function( $ ) {
	var accordion = $( '[class*="accordion"]' );
	$( '.accordion-js' ).addClass( 'accordion' ); // Ajout d'une class pour le style
	$( '.accordion-js-link' ).addClass( 'accordion-link' ); // Idem
	accordion.attr({ // Ajout d'une id par accordéon (facultatif)
		id: function( index ) {
			return 'accordion-' + index;
		}
	} );
	accordion.find( '> :nth-child(odd)' ).wrap( '<a href=""/>' ); // Ajout de liens permettant l'accessibilité
	accordion.find( '> a *' ).contents().unwrap(); // Nettoyage des balises supperflues
	accordion.find( '> :nth-child(even)' ).hide(); // Cacher le contenu
	accordion.find( '> .active' ).show(); // Montrer le contenu comportant '.active'
	accordion.find( '> .active' ).prev().addClass( 'active' ); // Si élément de contenu comporte '.active', alors élément précédent (titre) comporte '.active'
	accordion.find( '> a' ).click( function( e ) {
		var link = $( this );
		link.toggleClass( 'active' ); // Ajout/suppression de '.active' sur élément cliqué
		link.siblings().removeClass( 'active' ); // Retrait de '.active' sur les élements frères
		link.siblings( '[class*="accordion"] > :nth-child(even)' ).slideUp();
		if (!link.next().is( ':visible' )) {
			link.next().slideDown().addClass( 'active' );
		}
		e.preventDefault();
	} );
} )( jQuery );
</script>

</body>
</html>
Sujet clos
Aller à