Горизонтальный слайдер аккордеон

DOWNLOAD

DEMO

Один мой знакомый попросил помочь ему интегрировать в его лэндинг горизонтальный слайдер аккордеон (horizontal accordion). Я решил совместить полезное с полезным. Так и родилась эта заметка о создании горизонтального аккордеона на jquery.

И так приступим к созданию горизонтального слайдера аккордеона. По традиции начнём с html и css кода. Наш слайдер будет представлять собой ul список внутри которого будут находиться блоки li с классом item, которые будут представлять из себя слайды слайдера(извините за тавтологию). В блок li у нас будут входить блок с классом trigger и классом content. Блок с классом trigger выполняет функцию корешка с названием слайда, который торчит когда слайдер закрытый. Блок с классом content представляет собой сам слайд. У меня в слайде будет заголовок и рыбный текст. Ниже показан листинг html кода нашего слайдера.

                                     
<ul class="menu">
    <li class="item">
        <div class="trigger">
            <p>SLIDE 1 SLIDE 1</p>
        </div>
        <div class="content">
            <h3>SLIDE 1</h3>
            <p>text1</p>
        </div>
    </li>
     <li class="item">
        <div class="trigger">
            <p>SLIDE 2 SLIDE 2</p>
        </div>
        <div class="content">
            <h3>SLIDE 2</h3>
            <p>text2</p>
        </div>
    </li>
     <li class="item">
        <div class="trigger">
            <p>SLIDE 3 SLIDE 3</p>
        </div>
        <div class="content">
            <h3>SLIDE 3</h3>
            <p>text3</p>
        </div>
    </li>
</ul>

Листинг css кода

ul{
    background-color: #0033cc;
    position: absolute;
    height: 500px;
    top: 100;
    right: 0;
    list-style: none;
}
li{
   height: 100%;
/*что бы слайды стали горизонтальные*/
   float: left;
}
.trigger{
    height: 100%;
    width: 80px;
    background-color: #008200;
    border: 1px solid #49FFA6;
    position: relative;
    float: left;
    cursor: pointer;
}

.trigger p{
    text-align: center;
/*что бы текст был одной строкой*/
    white-space: nowrap;
/*для горизонтальности текста*/
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    position: absolute;
    top: 50%;
    left: -50px;
    font-weight: bold;
}
.content{
    float: left;
    background-color: #000;
/*вся магия в том что убираем ширину 
блока с контентом, а при клике js 
добавляет 530 px*/
    width: 0;
/*обрезает всё что уходит за рамки контейнера*/
    overflow: hidden;
}
.content p, .content h3{
    width: 500px;
    color: #fff;
    padding: 15px;
}

Css код я думаю понятен, не знаю что здесь объяснять. Нужно просто обратить внимание как позиционируются элементы. Теперь перейдём к сердцу нашего слайдера, js коду. Листинг ниже.

                                     
$(function(){
//обрабатываем клик по блоку с классом trigger
$('.trigger').on('click', function(e){
    e.preventDefault();
//получаем нужные нам данные
        var $this = $(this),
        //получаем всё блоки menu
        container = $this.closest('.menu'),
        //получаем li по которому кликнули
        item = $this.closest('.item'),
        //получаем все другие li
        items = container.find('.item'),
        //выбираем из li активный
        activeItem = items.filter('.active'),
        //выбираем из li по которому кликнули блок контен
        content = item.find('.content'),
        //выбираем у li с классом active блок контент
        activeContent = activeItem.find('.content');

        //если нет li с классом active по которому кликнули
        if (!item.hasClass('active')) {
            //убираем класс active
            items.removeClass('active');
            //добавляем active кликнутому
            item.addClass('active');
            //у того у кого был active задаём ширину 0
            activeContent.animate({
                   'width' : '0px'
            });
            //кликнутому 530        
            content.animate({
                   'width' : '530px'
            });
        //иначе
        } else {
            item.removeClass('active');
            content.animate({
                   'width' : '0px'
            });

        }
});

// клик вне аккордеона
$(document).on('click', function (e) {
   var $this = $(e.target);
   if (!$this.closest('.menu').length) {
         $('.content').animate({
               'width' : '0px'
         });
         $('.item').removeClass('active');
   }
});
});

Jquery код я прокомментировал достаточно. По сути мы сначала получили все нужные элементы слайдера в разном положении и задали условия, при котором одному из элементов добавляется width: 530px, а у другого элемента ширина переходит в 0. Вот таким вот способом я написал горизонтальный слайдер аккордеон (horizontal accordion) используя jquery и css.