JQuery UI : Un Tabs dans un autre Tabs

Sujet résolu

1 août 2018 à 14:16:16

Bonjour,

Après pas mal de recherche sur le net je n'ai pas trouvé de réponse à mon problème.

J'aimerai inclure un Tabs dans un autre tabs ,une architecture comme ci dessous:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
   <div id="tabsniveau2">
     <ul>
       <li><a href="#tabs-4">Nunc tincidunt</a></li>
       <li><a href="#tabs-5">Proin dolor</a></li>
     </ul>
      <div id="#tabs-4">
        blabla
      </div>
      <div id="tabs-5">
       blabla
     </div>
   </div>
  </div>
  <div id="tabs-2">
    <h2>Content heading 2</h2>
    <p>blabla</p>
  </div>
  <div id="tabs-3">
    <h2>Content heading 3</h2>
    <p>blabla</p>
  </div>
</div>

Avec un Jquery UI du type :

 $( function() {
            $( "#tabs, #tabsniveau2" ).tabs({ active :1,                 
                event: "click" })

        } );

Le souci c'est que seul le deuxième tabs fonctionne impossible de faire fonctionner les deux ensembles

J'image qu'il doit y avoir un conflit Jquery quelque part.

Sinon je mettrai des liens à la place du premier tabs

Merci

Lamecarlate

1 août 2018 à 14:33:46

Bonjour,

c'est apparemment possible, au vu des résultats de cette recherche : https://duckduckgo.com/?q=jqueryui+tabs+nested

Mais je te conseille plutôt un système d'onglets qui est conçu pour l'accessibilité, et qui a une version "nested" (des onglets dans des onglets) : https://a11y.nicolas-hoffmann.net/tabs/

Pas d'aide concernant le code par MP, le forum est là pour ça :)

EricLtr

1 août 2018 à 16:23:24

Parfait je regarderai ça quand je rentrerai de vacances !

Merci pour l'aide

EricLtr

13 août 2018 à 22:48:15

Merci pour les recherches plus pertinentes que les miennes

Si jamais quelqu'un a le même problème voici la solution à ce lien:

http://jsbin.com/jeluvuliya/edit?html,js,output

ou s'il est mort ci dessous

<!DOCTYPE html>
<html>
<head>
  <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  html { font-size: 64.5%; }
</style>
</head>
  <body>
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
      <div id="tabs-1">
      <div id="subtabs">
        <ul>
          <li><a href="#subtabs-1">Nunc tincidunt</a></li>
          <li><a href="#subtabs-2">Proin dolor</a></li>
          <li><a href="#subtabs-3">Aenean lacinia</a></li>
        </ul>
        <div id="subtabs-1">
          <p>inhalt</p>
        </div>
        <div id="subtabs-2">
          <p>inhalt</p>
        </div>
        <div id="subtabs-3">
          <p>inhalt</p>
        </div>
      </div>
    </div>
    <div id="tabs-2">
      <p>inhalt</p>
    </div>
    <div id="tabs-3">
      <p>inhalt</p>
    </div>
  </div>

  </body>
</html>

$("#tabs, #subtabs").tabs();