jQuery FlexTabs

jQuery-плагин для создания адаптивных вкладок
(табы, аккордеон, спойлер)

Скачать GitHub

Демо: Стандартный вариант

Инициализировано с настройками по умолчанию


HTML

        

          <!DOCTYPE html>
          <html>
          <head>
            <link rel="stylesheet" href="jquery.flextabs.min.css">
            <link rel="stylesheet" href="jquery.flextabs.theme-default.min.css">
          </head>
          <body>
            
            <div class="example" id="planets" data-ft style="display: none;">

              <nav>
                <a href="#mercury" class="active">Меркурий</a>
                <a href="#venus">Венера</a>
                <a href="#earth">Земля</a>
                <a href="#mars">Марс</a>
                <a href="#jupiter">Юпитер</a>
              </nav>
              
              <div>
                
                <div id="mercury">
                  <p>...</p>
                </div>
                
                <div id="venus">
                  <p>...</p>
                </div>
                
                <div id="earth">
                  <p>...</p>
                </div>

                <div id="mars">
                  <p>...</p>
                </div>

                <div id="jupiter">
                  <p>...</p>
                </div>

              </div>
              
            </div>

            <script src="jquery.min.js"></script>
            <script src="jquery.flextabs.min.js"></script>
          
          </body>
          </html>

JS



  $('.example').flexTabs();