Чуйні вкладки (таби) з переходом у акордеон jQuery & CSS3

64

У своїх статтях, я не раз звертався до теми створення вкладок(табів), що працюють з використанням бібліотеки javascript, jQuery, а так само розповідав і показував приклади реалізації вкладок виключно засобами CSS.
Таби(вкладки), досить популярний компонент в середовищі розробників веб-сайтів, цей елемент включений до складу практично всіх відомих фреймворків, найчастіше вони однотипні і по дизайну, і по функціональним можливостям.

Вимоги адаптивного дизайну диктують свої правила, по-цьому розробники намагаються всі елементи інтерфейсу і модульні компоненти веб-сайтів, різними способами підігнати під ці вимоги, і звичайно ж вкладки(таби) не виняток
.
В одній зі своїх статей розповідав про одне цікаве рішення створення адаптивних вкладок на CSS, без підключення javscript. Концепція полягала в тому, що при зменшенні розмірів вікна перегляду, текстові заголовки вкладок зникали, подменяясь інформативними іконками, явно вказують на зміст вкладок. Завдяки чому блок вкладок ставав більш компактним.

Існують і інші способи створення адаптивних табів, наприклад, коли при зменшенні екрану перегляду до певних розмірів, вкладки (таби) плавно перебудовуються в режим «акордеона».
Ось саме такий спосіб адаптування вкладок, ми з вами і розглянемо в цій статті. Сформуємо каркас, стилів вкладок і акордеона, підключимо в роботу останню версію бібліотеки jQuey, і з допомогою невеликого js додамо движухи нашим вкладок, та акордеону відповідно.

Для початку, так би мовити, для загального розуміння того, що ми хочемо отримати в результаті, мабуть варто поглянути на приготоване демо, а вже потім розгребемо весь фарш исходников.

Демо

І так, приклад сподіваюся подивилися, з тими кому воно треба, розглянемо, як все це справа відтворити на практиці і почнемо з основи, а саме з побудови html-каркаса вкладок.

HTML

Перш за все, створимо базовий div контейнер з певним класом, наприклад

і виставимо значення ширини width: 100%; у цьому випадку блок вкладок чудово впишеться в будь-який інший батьківський контейнер(основний блок контенту, бічні колонки тощо).
У цьому базовому контейнері розміщуємо розмітку наших вкладок, перемикачі яких це ніщо інше, як стандартний ненумерованний список

    , а далі прописуємо внутрішні блоки

    з певним змістом і елементами акордеона(панелі заголовків), які будуть приховані в режимі вкладок.
    Подивіться приклад html-коду вкладок(як є), думаю концепція даного рішення, вам стане відразу зрозуміла:

    
    <div class="tabs-box">
    
    <ul class="tabs">
    <li class="active" rel="tab1">Вкладка 1</li>
    <li rel="tab2">Вкладка 2</li>
    <li rel="tab3">Вкладка 3</li>
    <li rel="tab4" class="tab_last">Вкладка 4</li>
    </ul>
    
    <div class="tab_container">
    
    <h3 class="d_active tab_accordion" rel="tab1">Вкладка 1</h3>
    
    <div id="tab1" class="tab_content" style="display: block;">
    <h2>Вміст Вкладки 1</h2>
    <p>Далеко-далеко за словесними горами в країні голосних і приголосних живуть рибні тексти. Далеко від всіх живуть вони в буквених будинках на березі Семантика великого мовного океану.
    <p>Маленький струмочок Даль дзюрчить по всій країні і забезпечує її всіма необхідними правилами.</p>
    </div>
    
            <h3 class="tab_accordion" rel="tab2">Вкладка 2</h3>
    <div id="tab2" class="tab_content" style="display: none;">
    <h2>Вміст Вкладки 2</h2>
    <p><img src="http://lorempixel.com/250/200" class="img left">
    <p>Я зовсім один і блаженствую в тутешньому краю, немов створеному для таких, як я. Я так щасливий, мій друг, так захоплений відчуттям спокою, що моє мистецтво страждає від цього.
    <p>моя Душа осяяна неземною радістю, як ці чудові весняні ранку, якими я насолоджуюся від усього серця.</p>
    </div>
    
            <h3 class="tab_accordion" rel="tab3">Вкладка 3</h3>
    <div id="tab3" class="tab_content" style="display: none;">
    <h2>Вміст Вкладки 3</h2>
    <p><img src="http://lorempixel.com/250/200" class="img right">
    <p>Прокинувшись якось вранці після неспокійного сну, Грегор Замза виявив, що він у себе в ліжку перетворився на страшну комаху.
    <p>Лежачи на панцирнотвердой спині, він бачив, коштувало йому підвести голову, свій коричневий, опуклий, розділений дугоподібними лусочками живіт, на верхівці якого ледве трималося готове ось-ось остаточно сповзти ковдру</p>
    </div>
    
            <h3 class="tab_accordion" rel="tab4">Вкладка 4</h3>
    <div id="tab4" class="tab_content" style="display: none;">
    <h2>Вміст Вкладки 4</h2>
    <div class="video-responsive">
    <iframe width="1280" height="720" src="http://www.youtube.com/embed/mRrE8CFkkAg" frameborder="0" allowfullscreen></iframe>
    </div>
    </div>
    
        </div>
    
    </div>
    
    • Вкладка 1
    • Вкладка 2
    • Вкладка 3
    • Вкладка 4

    Вкладка 1

    Вміст Вкладки 1

    Далеко-далеко за словесними горами в країні голосних і приголосних живуть рибні тексти. Далеко від всіх живуть вони в буквених будинках на березі Семантика великого мовного океану.

    Маленький струмочок Даль дзюрчить по всій країні і забезпечує її всіма необхідними правилами.

    Вкладка 2

    Вміст Вкладки 2

    Я зовсім один і блаженствую в тутешньому краю, немов створеному для таких, як я. Я так щасливий, мій друже, так захоплений відчуттям спокою, що моє мистецтво страждає від цього.

    Моя Душа осяяна неземною радістю, як ці чудові весняні ранку, якими я насолоджуюся від усього серця.

    Вкладка 3

    Вміст Вкладки 3

    Прокинувшись одного ранку після неспокійного сну, Грегор Замза виявив, що він у себе в ліжку перетворився на страшну комаху.

    Лежачи на панцирнотвердой спині, він бачив, коштувало йому підвести голову, свій коричневий, опуклий, розділений дугоподібними лусочками живіт, на верхівці якого ледве трималося готове ось-ось остаточно сповзти ковдру

    Вкладка 4

    Вміст Вкладки 4

    Як бачите на прикладі я відразу продемонстрував деякі функціональні можливості вкладок при використанні в них, крім текстового змісту та інших елементів, зокрема це мініатюри і повнорозмірні зображення, а так само чуйний блок вбудованого через iframe, object або embed відео.

    При переході в стан акордеона перемикачі вкладок дивним чином перетворюються в панелі із заголовком, для цього використовував тег

    з певним класом і атрибутом rel, за допомогою якого, як і у випадку з вкладками, ми прив’яжемо панелі заголовків акордеона з конкретними блоками з вмістом.

    <h3 class="d_active tab_accordion" rel="tab1">Вкладка 1</h3>

    Вкладка 1

    Подивіться, значення атрибуту rel=”tab1″ точно відповідає ідентифікатором id=”tab1″ першого блоку вкладок(акордеона) з вмістом

    <div id="tab1" class="tab_content" style="display: block;">

    З допомогою style=”display: block;” ми зазначаємо, що при завантаженні буде показано вміст першої вкладки.

    Це все що стосується html-розмітки вкладок, з іншими вбудованими елементами( зображення, мініатюри, відео…) думаю розберетеся, короткі коментарі в css і html в цьому вам допоможуть.

    CSS

    C html-розміткою ми більш-менш розібралися, тепер необхідно сформувати загальні стилі і оформити зовнішній вигляд вкладок, і акордеона з допомогою «магії» CSS.
    Розписувати кожен окремий елемент я не буду, конкретно зупинюся лише на визначеннях стадії переходу вкладок в режим акордеона з допомогою медіа-запитів. Ну, а весь фарш коду CSS в кінцевому вигляді, буде виглядати приблизно так:

    /* Вкладки (таби)
    -----------------------------------------------------*/
    /* бфзовый контейнер вкладок(табів) */
    .tabs-box {
    display: inline-block;
    position: relative;
    padding: 0;
    margin: 0;
    width: 100%;
    }
    /* панель вкладок */
    ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 42px;
    border-bottom: 1px solid #00655c;
     width: 100%;
    }
    ul.tabs li {
    float: left;
    margin: 0;
    cursor: pointer;
    padding: 0 21px;
    height: 42px;
    line-height: 42px;
    border-top: 1px solid #00655c;
     border-left: 1px solid #00655c;
     border-right: 1px solid #00b7a6;
     background-color: #009688;
     color: #ddd;
     overflow: hidden;
    position: relative;
    font-size: 16px
    }
    /* вказуємо стиль правої рамки у останньої вкладки */
    .tab_last {
    border-right: 1px solid #00655c;
    }
    /* стилі вкладок при наведенні */
    ul.tabs li:hover {
    background-color: #26A69A;
     color: #fefefe;
    }
    /* стилі активних вкладок */
    ul.tabs li.active {
    background-color: #fff;
     color: #333;
     border-top: 2px solid green;
    display: block;
    }
    /* контейнер вкладок першого рівня
    * включає в себе панелі заголовків акордеона
    */
    .tab_container {
    border: 1px solid #00655c;
     border-top: none;
    clear: both;
    float: left;
    width: 100%;
    background: #fff;
     overflow: auto;
    }
    /* блоки з вмістом за замовчуванням приховані
    * вказати розкритим при завантаженні потрібний блок
    * з допомогою style="display: block;" в html
    */
    .tab_content {
    padding: 20px;
    display: none;
    }
    /* параграф всередині блоків з вмістом */
    .tab_content p {
    margin-bottom: 10px
    }
    /**
    * Зображення всередині вкладок
    * ...зробимо їх чуйними
    */
    .tab_content img {
    width: 100%;
    height: auto;
    -moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    /* повнорозмірна картинка */
    .tab_content img .large-img {
    width: 100%;
    margin-bottom: 10px;
    }
    /* мініатюра зліва */
    .tab_content img.img-left {
    width: 25%;
    float: left;
    margin: 5px 15px 15px 0;
    }
    /* мініатюра праворуч */
    .tab_content img.img-right {
    width: 25%;
    float: right;
    margin: 5px 0 15px 15px;
    }
    /* Вбудований відео */
    .video-responsive {
    margin: 20px;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    -moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    /* Передбач використання коду вбудованого відео
    *через iframe, object або embed */
    .video-responsive iframe,
    .video-responsive object,
    .video-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    /* акордеон прихований в режимі вкладок */
    .tab_accordion {
    display: none;
    }
    /* Перехід вкладок в режим акордеона
    * при досягненні розміру вікна перегляду 480px
    */
    @media screen and (max-width: 480px) {
    /* приховуємо вкладки */
    .tabs {
    display: none;
    }
    /* показуємо елементи акордеона */
    .tab_accordion {
    position: relative;
    background-color: #26A69A;
     font-weight: 400;
    font-size: 16px;
    color: #ddd;
     border-top: 1px solid #ccc;
     margin: 0;
    padding: 14px 20px;
    display: block;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }
    /* панелі акордеона при наведенні */
    .tab_accordion:hover {
    background-color: #009688;
     }
    /* перемикач вкладок, положення вниз */
    .tab_accordion:before {
    content: ";
    height: 8px;
    width: 8px;
    display: block;
    border: 2px solid #fefefe;
     border-right-width: 0;
    border-top-width: 0;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    right: 20px;
    top: 18px
    }
    /* стан активних панелей */
    .d_active {
    background-color: #008477;
     color: #fff;
     }
    /* активний перемикач, положення вгору */
    .d_active.tab_accordion:before {
    border: 2px solid #fefefe;
     border-left-width: 0;
    border-bottom-width: 0;
    top: 18px
    }
    }

    /* Вкладки (таби)
    —————————————————–*//* бфзовый контейнер вкладок(табів) */.tabs-box {
    display: inline-block;
    position: relative;
    padding: 0;
    margin: 0;
    width: 100%;
    }/* панель вкладок */ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 42px;
    border-bottom: 1px solid #00655c;
    width: 100%;
    }ul.tabs li {
    float: left;
    margin: 0;
    cursor: pointer;
    padding: 0 21px;
    height: 42px;
    line-height: 42px;
    border-top: 1px solid #00655c;
    border-left: 1px solid #00655c;
    border-right: 1px solid #00b7a6;
    background-color: #009688;
    color: #ddd;
    overflow: hidden;
    position: relative;
    font-size: 16px
    }/* вказуємо стиль правої рамки у останньої вкладки */.tab_last {
    border-right: 1px solid #00655c;
    }/* стилі вкладок при наведенні */ul.tabs li:hover {
    background-color: #26A69A;
    color: #fefefe;
    }/* стилі активних вкладок */ul.tabs li.active {
    background-color: #fff;
    color: #333;
    border-top: 2px solid green;
    display: block;
    }/* контейнер вкладок першого рівня
    * включає в себе панелі заголовків акордеона
    */.tab_container {
    border: 1px solid #00655c;
    border-top: none;
    clear: both;
    float: left;
    width: 100%;
    background: #fff;
    overflow: auto;
    }/* блоки з вмістом за замовчуванням приховані
    * вказати розкритим при завантаженні потрібний блок
    * з допомогою style=”display: block;” в html
    */.tab_content {
    padding: 20px;
    display: none;
    }/* параграф всередині блоків з вмістом */.tab_content p {
    margin-bottom: 10px
    }/**
    * Зображення всередині вкладок
    * …зробимо їх чуйними
    */.tab_content img {
    width: 100%;
    height: auto;
    -moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 0 20px rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 0 20px rgba(0, 0, 0, 0.19);
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 0 20px rgba(0, 0, 0, 0.19);
    }/* повнорозмірна картинка */.tab_content img .large-img {
    width: 100%;
    margin-bottom: 10px;
    }/* мініатюра зліва */.tab_content img.img left {
    width: 25%;
    float: left;
    margin: 5px 15px 15px 0;
    }/* мініатюра праворуч */.tab_content img.img right {
    width: 25%;
    float: right;
    margin: 5px 0 15px 15px;
    }/* Вбудований відео */.video-responsive {
    margin: 20px;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    -moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 0 20px rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 0 20px rgba(0, 0, 0, 0.19);
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 0 20px rgba(0, 0, 0, 0.19);
    }/* Передбач використання коду вбудованого відео
    *через iframe, object або embed */.video-responsive iframe,
    .video-responsive object,
    .video-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }/* акордеон прихований в режимі вкладок */.tab_accordion {
    display: none;
    }/* Перехід вкладок в режим акордеона
    * при досягненні розміру вікна перегляду 480px
    */@media screen and (max-width: 480px) {
    /* приховуємо вкладки */
    .tabs {
    display: none;
    }
    /* показуємо елементи акордеона */
    .tab_accordion {
    position: relative;
    background-color: #26A69A;
    font-weight: 400;
    font-size: 16px;
    color: #ddd;
    border-top: 1px solid #ccc;
    margin: 0;
    padding: 14px 20px;
    display: block;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }
    /* панелі акордеона при наведенні */
    .tab_accordion:hover {
    background-color: #009688;
    }
    /* перемикач вкладок, положення вниз */
    .tab_accordion:before {
    content: “;
    height: 8px;
    width: 8px;
    display: block;
    border: 2px solid #fefefe;
    border-right-width: 0;
    border-top-width: 0;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    right: 20px;
    top: 18px
    }
    /* стан активних панелей */
    .d_active {
    background-color: #008477;
    color: #fff;
    }
    /* активний перемикач, положення вгору */
    .d_active.tab_accordion:before {
    border: 2px solid #fefefe;
    border-left-width: 0;
    border-bottom-width: 0;
    top: 18px
    }
    }

    Певний шрифт до даних вкладок я не прив’язував, так як на різних сайтах і шрифти використовуються різні, так що при використанні вкладок у ваших проектах, буде застосовано базовий шрифт вашого сайту.
    На демонстраційній сторінці використовував шрифт з сімейства Roboto, підключивши безпосередньо з Google Fonts.

    Для переходу вкладок в стан акордеона, при перегляді на екранах менших розмірів, використовував один медіа-запит з максимально можливим значенням ширини при якому акордеон прихований і вкладки показані у своєму звичайному стані, а при досягненні розміру вікна перегляду менше вказаного значення, вкладки переходять в режим акордеона:

    @media screen and (max-width: 480px) {
    /* приховуємо вкладки */
    .tabs {
    display: none;
    }
    /* показуємо елементи акордеона */
    .tab_accordion {
    position: relative;
    background-color: #26A69A;
     font-weight: 400;
    font-size: 16px;
    color: #ddd;
     border-top: 1px solid #ccc;
     margin: 0;
    padding: 14px 20px;
    display: block;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }
    /* панелі акордеона при наведенні */
    .tab_accordion:hover {
    background-color: #009688;
     }
    /* перемикач вкладок, положення вниз */
    .tab_accordion:before {
    content: ";
    height: 8px;
    width: 8px;
    display: block;
    border: 2px solid #fefefe;
     border-right-width: 0;
    border-top-width: 0;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    right: 20px;
    top: 18px
    }
    /* стан активних панелей */
    .d_active {
    background-color: #008477;
     color: #fff;
     }
    /* активний перемикач, положення вгору */
    .d_active.tab_accordion:before {
    border: 2px solid #fefefe;
     border-left-width: 0;
    border-bottom-width: 0;
    top: 18px
    }
    }

    @media screen and (max-width: 480px) {
    /* приховуємо вкладки */
    .tabs {
    display: none;
    }
    /* показуємо елементи акордеона */
    .tab_accordion {
    position: relative;
    background-color: #26A69A;
    font-weight: 400;
    font-size: 16px;
    color: #ddd;
    border-top: 1px solid #ccc;
    margin: 0;
    padding: 14px 20px;
    display: block;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }
    /* панелі акордеона при наведенні */
    .tab_accordion:hover {
    background-color: #009688;
    }
    /* перемикач вкладок, положення вниз */
    .tab_accordion:before {
    content: “;
    height: 8px;
    width: 8px;
    display: block;
    border: 2px solid #fefefe;
    border-right-width: 0;
    border-top-width: 0;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    right: 20px;
    top: 18px
    }
    /* стан активних панелей */
    .d_active {
    background-color: #008477;
    color: #fff;
    }
    /* активний перемикач, положення вгору */
    .d_active.tab_accordion:before {
    border: 2px solid #fefefe;
    border-left-width: 0;
    border-bottom-width: 0;
    top: 18px
    }
    }

    Відповідно до max-width: 480px нічого не заважає прописати будь-яке інше, потрібне вам значення, експериментуйте, головне щоб результат виглядав коректно та логічно.
    Так само можете використовувати більшу кількість медіа-запитів під різні типи пристроїв, що дозволить більш гнучко настроїти переходи вкладок в стан акордеона і назад.

    jQuery

    В даний час, враховуючи можливості сучасних браузерів з підтримкою нових властивостей CSS3, такий вид чуйних вкладок з переходом у акордеон, можна реалізувати скориставшись виключно засобами CSS, про це обов’язково розповім одній з наступних статей.
    Що ж стосується даних вкладок, то для повноцінної роботи нам знадобиться популярна бібліотека javascript, jQuery, у конкретному випадку, використовуємо останню версію з 2 гілки.x підключивши безпосередньо з CDN Google. Якщо у вас jQuery ще не використовується, щоб підключити її досить внизу сторінки, перед закриваючим тегом прописати наступне:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">

    Тепер, для того щоб наші вкладки заробили, безпосередньо на сторінці html, все там же, в районі тега , необхідно прописати невеликий виконуваний javascript, за допомогою якого запустимо перемикання і розкриття блоків з вмістом, як в режимі вкладок, так і в режимі акордеона.

    <script>
    // вкладки з вмістом
    // http://dbmast.ru
    $(".tab_content").hide();
    $(".tab_content:first").show();
    /* в режимі вкладок */
    $("ul.tabs li").click(function () {
    $(".tab_content").hide();
    var activeTab = $(this).attr("rel");
    $("#" + activeTab).fadeIn();
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_accordion").removeClass("d_active");
    $(".tab_accordion[rel^='" + activeTab + "']").addClass("d_active");
    });
    /* в режимі акордеона */
    $(".tab_accordion").click(function () {
    $(".tab_content").hide();
    var d_activeTab = $(this).attr("rel");
    $("#" + d_activeTab).fadeIn();
    $(".tab_accordion").removeClass("d_active");
    $(this).addClass("d_active");
    $("ul.tabs li").removeClass("active");
    $("ul.tabs li[rel^='" + d_activeTab + "']").addClass("active");
    });
    /* додатковий клас tab_last,
    щоб додати кордон до правої
    боці останньої вкладки. */
    $('ul.tabs li').last().addClass("tab_last");
    

    // вкладки з вмістом
    // http://dbmast.ru
    $(“.tab_content”).hide();
    $(“.tab_content:first”).show();
    /* в режимі вкладок */
    $(“ul.tabs li”).click(function () {
    $(“.tab_content”).hide();
    var activeTab = $(this).attr(“rel”);
    $(“#” + activeTab).fadeIn();
    $(“ul.tabs li”).removeClass(“active”);
    $(this).addClass(“active”);
    $(“.tab_accordion”).removeClass(“d_active”);
    $(“.tab_accordion[rel^='” + activeTab + “‘]”).addClass(“d_active”);
    });
    /* в режимі акордеона */
    $(“.tab_accordion”).click(function () {
    $(“.tab_content”).hide();
    var d_activeTab = $(this).attr(“rel”);
    $(“#” + d_activeTab).fadeIn();
    $(“.tab_accordion”).removeClass(“d_active”);
    $(this).addClass(“d_active”);
    $(“ul.tabs li”).removeClass(“active”);
    $(“ul.tabs li[rel^='” + d_activeTab + “‘]”).addClass(“active”);
    });
    /* додатковий клас tab_last,
    щоб додати кордон до правої
    боці останньої вкладки. */
    $(‘ul.tabs li’).last().addClass(“tab_last”);

    Якщо нічого не пропустив, то на цьому мабуть і все. Чуйні «жах» і цілком собі автономні вкладки з переходом в «акордеон», повністю готові до роботи.
    Залишається лише ще раз уважно подивитися живий приклад роботи вкладок і при необхідності завантажити вихідні коди, які я дбайливо упакував в архів і виклав для вільного скачування в хмару свого Яндекс.Диска:

    ДемоСкачать

    З Повагою, Андрій .

    Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: