Exemples d'accordéons simples et accordéons avec sous accordéons en Jquery

10 février 2020 JAVASCRIPT & JQUERY
Javascript JQuery HTML CSS code

Il est parfois utile de créer un accordéon dans une page pour y présenter du contenu, voici deux bouts de code exemple en Javascript JQuery à intégrer dans vos pages web. 1er exemple accordéon avec sous accordéons et 2 ème exemple accordéon simple en JQuery.

en savoir plus: https://jqueryui.com/accordion/

EXEMPLE d'accordéon javascript n° 1 : la démo

EXEMPLE n° 1 : le code accordéon javascript

<code>

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
  $( function(){ // forme abrégée de $(document).ready(function(){
 
    $( ".contenue" ).slideUp( 0 );
 
    $( ".titre, .soustitre" ).on( "click", function(){
        $( this ).next( ".contenue" ).slideToggle();
    });
});
</script>

<div id="accordeon">
<div class="titre"><strong>Title 1</strong></div>
<div class="contenue">Contain 1</div>

<div class="titre"><strong>Title 2</strong></div>
<div class="contenue">Contain 2
<div class="soustitre"><strong>Sub Title 2-1</strong></div>
<div class="contenue">Contain Sub title 2-1</div>
<div class="soustitre"><strong>Sub Title 2-2</strong></div>
<div class="contenue">Contain sub title 2-2</div>
</div>

<div class="titre"><strong>Title 3</strong></div>
<div class="contenue">Contain 3
<div class="soustitre"><strong>Sub title 3-1</strong></div>
<div class="contenue">Contain sub title 3-1</div>
</div>

</div>

</code>

EXEMPLE n° 2 : le code 

<code>

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><script>
        jQuery(function($){
        $("#accordion").accordion({
          heightStyle: "content",
          active: false,
          collapsible: true
        });
      });
</script></p>

<div id="accordion">
<h3><span style="color:#006699;"><span style="font-size:28px;">section 1</span></span></h3>

<div>
<p style="text-align: justify;"><span style="font-size:24px;"><span style="font-family:Arial,Helvetica,sans-serif;">contenu 1 section 1</span></span></p>
<p style="text-align: justify;"><span style="font-size:24px;"><span style="font-family:Arial,Helvetica,sans-serif;">contenu 2 section 1</span></span></p>
<p style="text-align: justify;"><span style="font-size:24px;"><span style="font-family:Arial,Helvetica,sans-serif;">contenu 3 section 1</span></span></p>
</div>

<h3><span style="color:#006699;"><span style="font-size:28px;">section 2</span></span></h3>

<div>
<p style="text-align: justify;"><span style="font-size:24px;"><span style="font-family:Arial,Helvetica,sans-serif;">contenu 1 section 2</span></span></p>
<p style="text-align: justify;"><span style="font-size:24px;"><span style="font-family:Arial,Helvetica,sans-serif;">contenu 2 section 2</span></span></p>
<p style="text-align: justify;"><span style="font-size:24px;"><span style="font-family:Arial,Helvetica,sans-serif;">contenu 3 section 2</span></span></p>
</div>

<h3><span style="color:#006699;"><span style="font-size:28px;">section2</span></span></h3>

<div>
<p style="text-align: justify;"><span style="font-size:24px;"><span style="font-family:Arial,Helvetica,sans-serif;">contenu 1 section 3</span></span></p>
<p style="text-align: justify;"><span style="font-size:24px;"><span style="font-family:Arial,Helvetica,sans-serif;">contenu 2 section 3</span></span></p>
<p style="text-align: justify;"><span style="font-size:24px;"><span style="font-family:Arial,Helvetica,sans-serif;">contenu 3 section 3</span></span></p>
</div>

<h3><span style="color:#006699;"><span style="font-size:28px;">section4</span></span></h3>

<div>
<p style="text-align: justify;"><span style="font-size:24px;"><span style="font-family:Arial,Helvetica,sans-serif;">contenu 1 section 4</span></span></p>
<p style="text-align: justify;"><span style="font-size:24px;"><span style="font-family:Arial,Helvetica,sans-serif;">contenu 2 section 4</span></span></p>
<p style="text-align: justify;"><span style="font-size:24px;"><span style="font-family:Arial,Helvetica,sans-serif;">contenu 3 section 4</span></span></p>
</div>

</div>
</code>

EXEMPLE d'accordéon javascript n° 2 : la démo