accordéon – devfrontend.info

[javaScript] Un accordéon avec l’attribut HTML onClick

20/12/2018 / admin

Problème: les composants Accordéon de Bootstrap et Foundation font lagguer l’affichage sur des pages longues (lorsqu’ils sont initialisés trop de fois).

Solution: ne pas les utiliser, mais préférer une petite fonction « ouvrir/fermer » qui s’active via un onClick="$(this).<ma_fonction>();" placé sur l’élément qui déclanche l’ouverture/fermeture.

<script type="text/javascript">
  $.fn.openRow = function() {
    var $this = $(this);
    var $class = $this.attr('class');

    if ($this.attr('aria-expanded') == 'false') {
      $this.attr('aria-expanded', true);
      if ($class == 'flights-primary-info') {
        $this.next('.is-sharecode').attr('aria-expanded', true);
      }
      else {
        $this.prev('.flights-primary-info').attr('aria-expanded', true);
      }
      $this.nextAll('.flights-secondary-info:first').attr('aria-expanded', true).removeClass('is-hidden');
    }

    else {
      $this.attr('aria-expanded', false);
      if ($class == 'flights-primary-info') {
        $this.next('.is-sharecode').attr('aria-expanded', false);
      }
      else {
        $this.prev('.flights-primary-info').attr('aria-expanded', false);
      }
      $this.nextAll('.flights-secondary-info:first').attr('aria-expanded', false).addClass('is-hidden');
    }
  };
</script>

$.fn.openRow = function() {

var $this = $(this);

var $class = $this.attr('class');

if ($this.attr('aria-expanded') == 'false') {

$this.attr('aria-expanded', true);

if ($class == 'flights-primary-info') {

$this.next('.is-sharecode').attr('aria-expanded', true);

}

else {

$this.prev('.flights-primary-info').attr('aria-expanded', true);

}

$this.nextAll('.flights-secondary-info:first').attr('aria-expanded', true).removeClass('is-hidden');

}

else {

$this.attr('aria-expanded', false);

if ($class == 'flights-primary-info') {

$this.next('.is-sharecode').attr('aria-expanded', false);

}

else {

$this.prev('.flights-primary-info').attr('aria-expanded', false);

}

$this.nextAll('.flights-secondary-info:first').attr('aria-expanded', false).addClass('is-hidden');

}

};

</script>

<a class="flights-primary-info" data-toggle="mobileSecondary-${repeat/flight/number}" aria-expanded="false" onClick="$(this).openRow();">

1	<a class="flights-primary-info" data-toggle="mobileSecondary-${repeat/flight/number}" aria-expanded="false" onClick="$(this).openRow();">

[jQuery] Une navigation responsive par onglets en vue Desktop et accordéon en vue Mobile

07/09/2016 / admin

Demo sur jsfiddle.net.

HTML

<p class="desktop">desktop</p>
<p class="mobile">mobile</p>

<ul class="facet-nav">
  <li class="facet-nav-item">
    <a class="link level0" href="#">Lorem ipsum</a>
    <ul class="facet-nav-sublevel is-closed">
      <li><a class="link" href="#">one</a></li>
      <li><a class="link" href="#">two</a></li>
    </ul>
  </li>
  <li class="facet-nav-item">
    <a class="link level0" href="#">Dolor</a>
    <ul class="facet-nav-sublevel is-closed">
      <li><a class="link" href="#">three</a></li>
      <li><a class="link" href="#">four</a></li>
      <li><a class="link" href="#">five</a></li>
      <li><a class="link" href="#">six</a></li>
    </ul>
  </li>
  <li class="facet-nav-item">
    <a class="link level0" href="#">Sit amet</a>
    <ul class="facet-nav-sublevel is-closed">
      <li><a class="link" href="#">seven</a></li>
      <li><a class="link" href="#">eight</a></li>
      <li><a class="link" href="#">nine</a></li>
    </ul>
  </li> 
</ul>
<p>Lorem ipsum dolor sit amet ...</p>

<p class="desktop">desktop</p>

<p class="mobile">mobile</p>

<a class="link level0" href="#">Lorem ipsum</a>

</ul>

</li>

<a class="link level0" href="#">Dolor</a>

<li><a class="link" href="#">three</a></li>

</ul>

</li>

<li><a class="link" href="#">seven</a></li>

<li><a class="link" href="#">eight</a></li>

</ul>

</li>

</ul>

<p>Lorem ipsum dolor sit amet ...</p>

SASS

.facet-nav{
  &-item{
    > .link{
      display: block;     
    }
  }
  &-sublevel.is-closed{
    display: none;
  }
  &-sublevel{
    display: block;
  }
}
@media screen and (max-width: 767px){
}
@media screen and (min-width: 768px){
  .facet-nav{
    display: table;
    &-item{
      display: table-cell;
    }
  }
}

// skin
.facet-nav{
  border: 1px solid tomato;
  padding: 5px;
  &-item{
    > .link{
      border: 1px solid tomato;
      padding: 15px;
      &.is-active{
        background: pink;
      }
    }
  }
}
@media screen and (max-width: 767px){
  .desktop{display: none;}
}
@media screen and (min-width: 768px){
  .mobile{display:none;}
  .facet-nav{
    &-sublevel{
      position: absolute;
      left: 0;
      width: 100%;
      background: pink;
    }
  }
}

.facet-nav{

&-item{

> .link{

display: block;

}

&-sublevel.is-closed{

display: none;

}

&-sublevel{

display: block;

}

@media screen and (max-width: 767px){

}

@media screen and (min-width: 768px){

.facet-nav{

display: table;

&-item{

display: table-cell;

}

// skin

.facet-nav{

border: 1px solid tomato;

padding: 5px;

&-item{

> .link{

border: 1px solid tomato;

padding: 15px;

&.is-active{

background: pink;

}

@media screen and (max-width: 767px){

.desktop{display: none;}

}

@media screen and (min-width: 768px){

.mobile{display:none;}

.facet-nav{

&-sublevel{

position: absolute;

left: 0;

width: 100%;

background: pink;

}

jQuery

$(document).ready(function(){
	var ulFacetNav = $('ul.facet-nav');
	var liFacetNavItem = $('li.facet-nav-item');
	var aFacetNavItemLevel0Link = $('a.level0');
  var facetNavTargetElements = $('ul.facet-nav'); // la navigation ne doit pas se fermer au clic sur ces éléments

  // on réinitialise le DOM à l'état initial (pour refermer la nav, notamment)
  function DOMreset(){
  		ulFacetNav.removeAttr('style');
      aFacetNavItemLevel0Link.each(function(){
      	$(this).removeClass('is-active');
      });
      $('ul.facet-nav-sublevel').each(function(){
      	$(this).addClass('is-closed');
      });  
  }
 
  // au clic à l'extérieur de la nav, cette dernière se referme
  $(document).on('click', function(){
  	DOMreset();
  });
  
  // la navigation ne doit pas se fermer au clic sur ces éléments
	facetNavTargetElements.on('click', function(e){
  	e.stopPropagation();
  });

  // vue Mobile (nav accordion)
  enquire.register("screen and (max-width: 767px)", {
    match : function() {
    	ulFacetNav.removeClass('is-desktop-nav').addClass('is-mobile-nav');
 			DOMreset();
      
      liFacetNavItem.off('click', '.level0').on('click', '.level0', function(e){
        $(this).toggleClass('is-active').next('ul.facet-nav-sublevel').toggleClass('is-closed');
        e.preventDefault();
      });
    },
    unmatch : function() {}
	});
	
  // vue Desktop (nav tabs)
  enquire.register("screen and (min-width: 768px)", {
    match : function() {
    	ulFacetNav.removeClass('is-mobile-nav').addClass('is-desktop-nav');
      DOMreset();

      liFacetNavItem.off('click', '.level0').on('click', '.level0', function(e){
        if($(this).hasClass('is-active')){
        	DOMreset();
        }
        else{
        	DOMreset();
          $(this).toggleClass('is-active').next('ul.facet-nav-sublevel').toggleClass('is-closed');
          var getOpenedFacetNavSublevelHeight = $(this).next('ul.facet-nav-sublevel').height();
          ulFacetNav.css('margin-bottom', getOpenedFacetNavSublevelHeight);        
        }
        e.preventDefault();
      });
		},
    unmatch : function() {}
	});
});

$(document).ready(function(){

var ulFacetNav = $('ul.facet-nav');

var liFacetNavItem = $('li.facet-nav-item');

var aFacetNavItemLevel0Link = $('a.level0');

var facetNavTargetElements = $('ul.facet-nav'); // la navigation ne doit pas se fermer au clic sur ces éléments

// on réinitialise le DOM à l'état initial (pour refermer la nav, notamment)

function DOMreset(){

ulFacetNav.removeAttr('style');

aFacetNavItemLevel0Link.each(function(){

$(this).removeClass('is-active');

});

$('ul.facet-nav-sublevel').each(function(){

$(this).addClass('is-closed');

});

}

// au clic à l'extérieur de la nav, cette dernière se referme

$(document).on('click', function(){

DOMreset();

});

// la navigation ne doit pas se fermer au clic sur ces éléments

facetNavTargetElements.on('click', function(e){

e.stopPropagation();

});

// vue Mobile (nav accordion)

enquire.register("screen and (max-width: 767px)", {

match : function() {

ulFacetNav.removeClass('is-desktop-nav').addClass('is-mobile-nav');

DOMreset();

liFacetNavItem.off('click', '.level0').on('click', '.level0', function(e){

$(this).toggleClass('is-active').next('ul.facet-nav-sublevel').toggleClass('is-closed');

e.preventDefault();

});

unmatch : function() {}

});

// vue Desktop (nav tabs)

enquire.register("screen and (min-width: 768px)", {

match : function() {

ulFacetNav.removeClass('is-mobile-nav').addClass('is-desktop-nav');

DOMreset();

liFacetNavItem.off('click', '.level0').on('click', '.level0', function(e){

if($(this).hasClass('is-active')){

DOMreset();

}

else{

DOMreset();

$(this).toggleClass('is-active').next('ul.facet-nav-sublevel').toggleClass('is-closed');

var getOpenedFacetNavSublevelHeight = $(this).next('ul.facet-nav-sublevel').height();

ulFacetNav.css('margin-bottom', getOpenedFacetNavSublevelHeight);

}

e.preventDefault();

});

unmatch : function() {}

});

[jQuery] Créer un accordéon simple

24/06/2013 / admin

Ressources en ligne :

Creating an Accordion with HTML, CSS & jQuery : accordéon dont la tuile ouverte se referme également au clic sur celle-ci.

<div class="accordion">
    <div class="accordion-section">
        <a class="accordion-section-title" href="#accordion-1">Accordion Section #1</a>
         
        <div id="accordion-1" class="accordion-section-content">
            <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->
</div><!--end .accordion-->

<a class="accordion-section-title" href="#accordion-1">Accordion Section #1</a>

<p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>

</div>

</div>

</div>

/*----- Accordion -----*/
.accordion, .accordion * {
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box;
}
 
.accordion {
    overflow:hidden;
    box-shadow:0px 1px 3px rgba(0,0,0,0.25);
    border-radius:3px;
    background:#f7f7f7;
}
 
/*----- Section Titles -----*/
.accordion-section-title {
    width:100%;
    padding:15px;
    display:inline-block;
    border-bottom:1px solid #1a1a1a;
    background:#333;
    transition:all linear 0.15s;
    /* Type */
    font-size:1.200em;
    text-shadow:0px 1px 0px #1a1a1a;
    color:#fff;
}
 
.accordion-section-title.active, .accordion-section-title:hover {
    background:#4c4c4c;
    /* Type */
    text-decoration:none;
}
 
.accordion-section:last-child .accordion-section-title {
    border-bottom:none;
}
 
/*----- Section Content -----*/
.accordion-section-content {
    padding:15px;
    display:none;
}

/*----- Accordion -----*/

.accordion, .accordion * {

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing:border-box;

}

.accordion {

overflow:hidden;

box-shadow:0px 1px 3px rgba(0,0,0,0.25);

border-radius:3px;

background:#f7f7f7;

}

/*----- Section Titles -----*/

.accordion-section-title {

width:100%;

padding:15px;

display:inline-block;

border-bottom:1px solid #1a1a1a;

background:#333;

transition:all linear 0.15s;

/* Type */

font-size:1.200em;

text-shadow:0px 1px 0px #1a1a1a;

color:#fff;

}

.accordion-section-title.active, .accordion-section-title:hover {

background:#4c4c4c;

/* Type */

text-decoration:none;

}

.accordion-section:last-child .accordion-section-title {

border-bottom:none;

}

/*----- Section Content -----*/

.accordion-section-content {

padding:15px;

display:none;

}

$(document).ready(function() {
    function close_accordion_section() {
        $('.accordion .accordion-section-title').removeClass('active');
        $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
    }
 
    $('.accordion-section-title').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = $(this).attr('href');
 
        if($(e.target).is('.active')) {
            close_accordion_section();
        }else {
            close_accordion_section();
 
            // Add active class to section title
            $(this).addClass('active');
            // Open up the hidden content panel
            $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
        }
 
        e.preventDefault();
    });
});

$(document).ready(function() {

function close_accordion_section() {

$('.accordion .accordion-section-title').removeClass('active');

$('.accordion .accordion-section-content').slideUp(300).removeClass('open');

}

$('.accordion-section-title').click(function(e) {

// Grab current anchor value

var currentAttrValue = $(this).attr('href');

if($(e.target).is('.active')) {

close_accordion_section();

}else {

close_accordion_section();

// Add active class to section title

$(this).addClass('active');

// Open up the hidden content panel

$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');

}

e.preventDefault();

});

Solutions « maison » :

Source : jsfiddle.net – Créer un accordéon basique avec jQuery

<ul class="is-list">
  <li class="is-item">
    <div class="is-header">
      item #1 header
    </div>
    <div class="is-content">
      item #1 content... lorem ipsum dolor sit amet...
    </div>
  </li>
  <li class="is-item">
    <div class="is-header">
      item #2 header
    </div>
    <div class="is-content">
      item #2 content... lorem ipsum dolor sit amet...
    </div>
  </li>
  <li class="is-item">
    <div class="is-header">
      item #3 header
    </div>
    <div class="is-content">
      item #3 content... lorem ipsum dolor sit amet...
    </div>
  </li>  
</ul>

item #1 header

</div>

item #1 content... lorem ipsum dolor sit amet...

</div>

</li>

item #2 header

</div>

item #2 content... lorem ipsum dolor sit amet...

</div>

</li>

item #3 header

</div>

item #3 content... lorem ipsum dolor sit amet...

</div>

</li>

</ul>

$(document).ready(function(){
  $('.is-content').addClass('hidden');
  $('.is-header').on('click', function(e){
    $(this).closest('.is-list').each(function(){
      $('.is-content').addClass('hidden');
    });
  $(this).next('.is-content').toggleClass('hidden');
    e.stopPropagation();
  });
});

$(document).ready(function(){

$('.is-content').addClass('hidden');

$('.is-header').on('click', function(e){

$(this).closest('.is-list').each(function(){

$('.is-content').addClass('hidden');

});

$(this).next('.is-content').toggleClass('hidden');

e.stopPropagation();

});

Gérer l’activation/désactivation de l’accordéon en fonction du breakpoint avec enquire.js et les méthodes On, Off

<ul class="shipping-mode-list">
  <li>
    <a class="tab-item">Titre</a>
    <div class="tab-content">
      <p>Lorem ipsum dolor sit amet ...</p>
    </div>
  </li>
</ul>

<li>

<a class="tab-item">Titre</a>

<p>Lorem ipsum dolor sit amet ...</p>

</div>

</li>

</ul>

(function($){
  $(document).ready(function(){
    enquire.register("screen and (max-width: 767px)", {
      match : function() {
        $('.shipping-mode-list .tab-content').addClass('hidden-xs');
        $('.shipping-mode-list .tab-item').on('click', function(e){
          $('.shipping-mode-list .tab-content').addClass('hidden-xs');
          $(this).next('.tab-content').toggleClass('hidden-xs');
          e.stopPropagation();
        });
      },
      unmatch : function() {
        $('.shipping-mode-list .tab-content').removeClass('hidden-xs');
        $('.shipping-mode-list .tab-item').off('click');
      }
    });
  });
})(jQuery);

(function($){

$(document).ready(function(){

enquire.register("screen and (max-width: 767px)", {

match : function() {

$('.shipping-mode-list .tab-content').addClass('hidden-xs');

$('.shipping-mode-list .tab-item').on('click', function(e){

$('.shipping-mode-list .tab-content').addClass('hidden-xs');

$(this).next('.tab-content').toggleClass('hidden-xs');

e.stopPropagation();

});

unmatch : function() {

$('.shipping-mode-list .tab-content').removeClass('hidden-xs');

$('.shipping-mode-list .tab-item').off('click');

}

});

})(jQuery);

Autres techniques (plus anciennes)

<div class="accordion-header">Cliquez pour ouvrir !</div>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet ...</p>
</div>

<div class="accordion-header">Cliquez pour ouvrir !</div>

<p>Lorem ipsum dolor sit amet ...</p>

</div>

	jQuery(document).ready(function(){
		jQuery('.accordion-content').hide();

		jQuery('.accordion-header').on('click', function(event){
			jQuery(this).toggleClass('open');
			jQuery('.accordion-content').toggle(100);
			event.stopPropagation();
		});

		jQuery('.adccordion-content').on('click', function(event){
			event.stopPropagation();
		});

		jQuery('html').on('click', function(event){
			jQuery('.accordion-content').hide(100);
		});
	});

jQuery(document).ready(function(){

jQuery('.accordion-content').hide();

jQuery('.accordion-header').on('click', function(event){

jQuery(this).toggleClass('open');

jQuery('.accordion-content').toggle(100);

event.stopPropagation();

});

jQuery('.adccordion-content').on('click', function(event){

event.stopPropagation();

});

jQuery('html').on('click', function(event){

jQuery('.accordion-content').hide(100);

});

Variante en mode ‘drop-down’ :

	  jQuery(document).ready(function(){
	    jQuery('.dropdown-content').hide();

	    jQuery('.dropdown-header, .dropdown-content').on('mouseover', function(event){
	      jQuery('.dropdown-content').show(0);
	      event.stopPropagation();
	    });

	    jQuery('.dropdown-header, .dropdown-content').on('mouseout', function(event){
	      jQuery('.dropdown-content').hide(0);
	      event.stopPropagation();
	    });

	  });

jQuery(document).ready(function(){

jQuery('.dropdown-content').hide();

jQuery('.dropdown-header, .dropdown-content').on('mouseover', function(event){

jQuery('.dropdown-content').show(0);

event.stopPropagation();

});

jQuery('.dropdown-header, .dropdown-content').on('mouseout', function(event){

jQuery('.dropdown-content').hide(0);

event.stopPropagation();

});

Articles récents

Catégories

Archives

Méta

Étiquette : accordéon

[javaScript] Un accordéon avec l’attribut HTML onClick

[jQuery] Une navigation responsive par onglets en vue Desktop et accordéon en vue Mobile

HTML

SASS

jQuery

[jQuery] Créer un accordéon simple

Ressources en ligne :

Solutions « maison » :

Gérer l’activation/désactivation de l’accordéon en fonction du breakpoint avec enquire.js et les méthodes On, Off

Autres techniques (plus anciennes)