Responsive Accordion Slider

by kthornbloom

HTML

<div class="ac-wrap">
    <div class="ac-title"></div>
    <div class="ac-item">
        <div class="ac-pad">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima placeat odio natus animi ducimus nam ipsam maiores tenetur quasi aliquid! Dolor porro nisi vel vero animi numquam delectus neque ducimus!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima placeat odio natus animi ducimus nam ipsam maiores tenetur quasi aliquid! Dolor porro nisi vel vero animi numquam delectus neque duc</div>
    </div>
    <div class="ac-title"></div>
    <div class="ac-item">
        <div class="ac-pad">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima placeat odio natus animi ducimus nam ipsam maiores tenetur quasi aliquid! Dolor porro nisi vel vero animi numquam delectus neque ducimus!</div>
    </div>
    <div class="ac-title"></div>
    <div class="ac-item">
        <div class="ac-pad">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima placeat odio natus animi ducimus nam ipsam maiores tenetur quasi aliquid! Dolor porro nisi vel vero animi numquam delectus neque ducimus!</div>
    </div>
    <div class="ac-title"></div>
    <div class="ac-item">
        <div class="ac-pad">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima placeat odio natus animi ducimus nam ipsam maiores tenetur quasi aliquid! Dolor porro nisi vel vero animi numquam delectus neque ducimus!</div>
    </div>
    <div class="ac-title"></div>
    <div class="ac-item">
        <div class="ac-pad">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima placeat odio natus animi ducimus nam ipsam maiores tenetur quasi aliquid! Dolor porro nisi vel vero animi numquam delectus neque ducimus!</div>
    </div>
    <div class="ac-title"></div>
    <div class="ac-item">
        <div class="ac-pad">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima placeat odio natus animi ducimus nam ipsam maiores tenetur quasi aliquid! Dolor porro nisi...

CSS

.ac-wrap {
    width:500px;
    margin:0 auto;
    border:1px solid blue;
    font-size:0;
    white-space:nowrap;
    background:#000;
    display:table;
    table-layout: fixed;
    overflow:hidden;
}
.ac-item {
    background:#ccc;
    display:table-cell;
    position:relative;
    font-size:14px;
    white-space:normal;
    overflow:hidden;
}
.ac-pad {
    padding:15px;
}
.ac-title {
    display:table-cell;
    width:49px;
    border-right:1px solid #fff;
    position:relative;
    font-size:12px;
    background:red;
    cursor:pointer;
}
.ac-title a:link, .ac-title a:visited {
}

JavaScript

var slideCount = $('.ac-item').length,
    containerWidth = $('.ac-wrap').width(),
    openSize = (containerWidth - (50 * slideCount));

$('.ac-item').css({
    width: '0',
    whiteSpace: 'nowrap'
});
$('.ac-item:first').css({
    width: openSize,
    whiteSpace: 'normal'
}).addClass('ac-active');

$(document.body).on('click', '.ac-title', function (event) {
    var height = $('.ac-wrap').height();
    $('.ac-wrap').css('max-width', height);

    $('.ac-active').css('whiteSpace','nowrap').animate({
        width: 0
    }, 1000, function () {
        $(this).removeClass();
    });

    $(this).next('.ac-item').css('whiteSpace','normal').animate({
        width: openSize
    }, 1000, function () {
        $(this).addClass('ac-active');
    });

});