Onglets RPWD

index.html

<!-- si vous voulez des onglets qui deviennent des ancres sans JS, ajouter des href="#id de l'onglet" aux liens -->
<!-- pour un chargement du contenu de l'onglet en ajax, ajouter l'attribut data-ajax-url="url-a-charger" sur la div noe-tabs-item, et pour afficher une partie du html retourné : data-ajax-selector=".ton .selecteur .css" -->
<div class="noe-tabs-wrapper">
  <ul class="noe-tabs-switcher">
    <li class="noe-tabs-switcher-select"><a href="">Onglet par défaut</a></li>
    <li><a href="">Onglet 2</a></li>
    <li><a href="">Onglet 3</a></li>
  </ul>
  
  <a class="noe-tabs-switcher-rpwd noe-tabs-switcher-select">Onglet par défaut</a>
  <div class="noe-tabs-item noe-tabs-item-active"> 
    Contenu onglet 1
  </div>
   
  <a class="noe-tabs-switcher-rpwd">Onglet 2</a>
  <div class="noe-tabs-item">
    Contenu onglet 2
  </div>
   
  <a class="noe-tabs-switcher-rpwd">Onglet 3</a>
  <div class="noe-tabs-item">
    Contenu onglet 3
  </div>
</div>

noewp.js

/**
 * Noe tabs
 * Copy this function to your noewp.js object and then add
 * this.registerOnglets();
 * to the init function;
 */
registerOnglets: function(){

  var tabsClassPrefix = 'noe-tabs';
  $('.'+tabsClassPrefix+'-wrapper').each(function() {
    var $wrapper = $(this);
    if($wrapper.data('noe-tabs')) return;
    var $lis = $wrapper.find('ul.'+tabsClassPrefix+'-switcher li'),
      $as = $wrapper.find('a.'+tabsClassPrefix+'-switcher-rpwd').on('click.noe-tabs', c),
      $tabs = $wrapper.find('.'+tabsClassPrefix+'-item');
    var i = $as.length; while(i--) $($as[i]).data('index', i); //because we can't use index() with an object, only string selector
  
    function c() {
      var $t = $(this),
       $parent = $t.hasClass(tabsClassPrefix+'-switcher-rpwd') ? $($lis[$t.data('index')]) : $t.parent(),
       index = $parent.index(),
       $tab = $($tabs[index]);
  
      $lis.not($parent.addClass(tabsClassPrefix+'-switcher-select')).removeClass(tabsClassPrefix+'-switcher-select');
      $as.not($($as[index]).addClass(tabsClassPrefix+'-switcher-select')).removeClass(tabsClassPrefix+'-switcher-select');
      $tabs.not($tab.addClass(tabsClassPrefix+'-item-active')).removeClass(tabsClassPrefix+'-item-active');
      
      if($t.hasClass(tabsClassPrefix+'-switcher-rpwd')) {
          $w.scrollTop($t.offset().top);
      }
      return false;
    } 
  
    $wrapper.data('noe-tabs', 1).find('ul.'+tabsClassPrefix+'-switcher li a').on('click.noe-tabs', c);
  });

}

style.css

.js .noe-tabs-wrapper .noe-tabs-item,
.no-js .noe-tabs-wrapper .noe-tabs-switcher,
.no-js .noe-tabs-switcher-rpwd {
  display:none; 
}

.noe-tabs-wrapper .noe-tabs-item.noe-tabs-item-active {
  display:block; 
}

.noe-tabs-wrapper .noe-tabs-switcher-select {
  cursor:default; 
}

.noe-tabs-switcher-rpwd {
  display:none;
  width:100%;
  clear:both;
}

/* changer la largeur à laquelle vous voulez que ca passe en accordeon */
@media screen and (max-width: 300px) {
  .noe-tabs-switcher-rpwd {
    display:block;
  }
    
  .noe-tabs-switcher {
    display:none;
  }
}