JQuery Horizontal Slider Sliding doors, tabs Accordion style

I saw a similar Horizontal slider sliding Accordion Flash effect on a website and I decided to create something with JQuery. It could be used as a banner or information tabs. I did not style much, you will have to modify the CSS to suit your needs. Take a look at the working demo below.

T
A
B
1
LxC Blog SEO PHP AJAX CSS JS JavaScript JQuery REGEX SCRIPT WordPress Program Internet WEB Source Code Design Develop Tool Class Function
LxC Blog SEO PHP AJAX CSS JS JavaScript JQuery REGEX SCRIPT WordPress Program Internet WEB Source Code Design Develop Tool Class Function.

T
A
B
2
LxC Blog SEO PHP AJAX CSS JS JavaScript JQuery REGEX SCRIPT WordPress Program Internet WEB Source Code Design Develop Tool Class Function
LxC Blog SEO PHP AJAX CSS JS JavaScript JQuery REGEX SCRIPT WordPress Program Internet WEB Source Code Design Develop Tool Class Function.

T
A
B
3
LxC Blog SEO PHP AJAX CSS JS JavaScript JQuery REGEX SCRIPT WordPress Program Internet WEB Source Code Design Develop Tool Class Function
LxC Blog SEO PHP AJAX CSS JS JavaScript JQuery REGEX SCRIPT WordPress Program Internet WEB Source Code Design Develop Tool Class Function.

T
A
B
4
LxC Blog SEO PHP AJAX CSS JS JavaScript JQuery REGEX SCRIPT WordPress Program Internet WEB Source Code Design Develop Tool Class Function
LxC Blog SEO PHP AJAX CSS JS JavaScript JQuery REGEX SCRIPT WordPress Program Internet WEB Source Code Design Develop Tool Class Function.

T
A
B
5
LxC Blog SEO PHP AJAX CSS JS JavaScript JQuery REGEX SCRIPT WordPress Program Internet WEB Source Code Design Develop Tool Class Function
LxC Blog SEO PHP AJAX CSS JS JavaScript JQuery REGEX SCRIPT WordPress Program Internet WEB Source Code Design Develop Tool Class Function.

Currently there are 5 tabs but you can remove or add as much as you need. Let’s get down to coding. As always do not forget to download and include JQuery in your header.

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

Next step will be creating the CSS file. Create a .css file and name it. Copy & paste the code below into your file. Do not forget to include your css file in your header. If you change height or width of the divs do not forget to add or remove the same amout of space for all divs.

.top-slider-main{width:600px; height:200px; overflow:hidden; position:relative; border:1px solid #000;}
.top-slider-main div{width:400px; height:200px; position:absolute; background-color:#FFF;}
.top-slider-main .slider-box1{z-index:96;}
.top-slider-main .slider-box2{margin-left:400px; z-index:97;}
.top-slider-main .slider-box3{margin-left:450px; z-index:98;}
.top-slider-main .slider-box4{margin-left:500px; z-index:99;}
.top-slider-main .slider-box5{margin-left:550px; z-index:100;}

.top-slider-main div .left{position:relative; width:50px; height:100%; float:left; cursor:pointer; color:#FFF;}
.top-slider-main div .content{position:relative; width:350px; color:#000; float:left; font-family: Arial, Helvetica, sans-serif; font-size:1em;}
.top-slider-main .slider-box1 .left{background-color:#dc2929;}
.top-slider-main .slider-box2 .left{background-color:#50f063;}
.top-slider-main .slider-box3 .left{background-color:#000;}
.top-slider-main .slider-box4 .left{background-color:#03F;}
.top-slider-main .slider-box5 .left{background-color:#4B3100;}

Take a look at the script below. You will see two loops. One for sliding right and one for sliding right. If you want to minimize the code I’d say go for it. Feel free to edit and modify it. You can copy & paste the code in the header or put it into a js file.

<script>
var $slider_started = false;
$(document).ready(function(){
    var $total_slider = $('.top-slider-main > div').length;
    var $label_width = $('.top-slider-main div .left').width();
    var $max_slider_width = ($total_slider -1)*$label_width;
    var $extra_margin = $('.top-slider-main div').width() - $label_width;
    
    $('.top-slider-main div:not(.slider-box1) .left').mouseover(function(){
        var $slider_index = $('.top-slider-main > div').index($(this).parent()) + 1;
        if($(this).parent().hasClass('on'))
        {
            if($slider_started != 1)
            {
                $slider_started = 2;
                for(i=$total_slider; i>=$slider_index; i--)
                {
                    var $elm = $('.top-slider-main .slider-box'+i);
                    if($elm.hasClass('on'))
                    {
                        $elm.removeClass('on');
                        var $left_margin = ($label_width*(i-1)) + $extra_margin;
                        $elm.stop().animate({marginLeft : $left_margin}, 1500, function(){$slider_started = false;});
                    }
                }
            }
        }
        else
        {
            if($slider_started != 2)
            {
                $slider_started = 1;
                for(i=2; i<=$slider_index; i++)
                {
                    var $elm = $('.top-slider-main .slider-box'+i);
                    if(!$elm.hasClass('on'))
                    {
                        $elm.addClass('on');
                        var $left_margin = ($label_width*(i-1));
                        $elm.stop().animate({marginLeft : $left_margin}, 1500, function(){$slider_started = false;});
                    }
                }
            }
        }
    });
});
</script>

Lastly we need to create the HTML structure. As I mentioned earlier you can add or remove tabs. For testing I put text into tabs you don’t have to put text you can put images. It is up to you just remove or replace the text.

<div class="top-slider-main">
    <div class="slider-box1">
        <div class="left"><br /><center>T<br />A<br />B<br />1</center></div>
        <div class="content">LxC Blog SEO PHP AJAX CSS JS JavaScript JQuery REGEX SCRIPT WordPress Program Internet WEB Source Code Design Develop Tool Class Function
LxC Blog SEO PHP AJAX CSS JS JavaScript JQuery REGEX SCRIPT WordPress Program Internet WEB Source Code Design Develop Tool Class Function.</div>
    </div>
    <div class="slider-box2">
        <div class="left"><br /><center>T<br />A<br />B<br />2</center></div>
        <div class="content">LxC Blog SEO PHP AJAX CSS JS JavaScript JQuery REGEX SCRIPT WordPress Program Internet WEB Source Code Design Develop Tool Class Function
LxC Blog SEO PHP AJAX CSS JS JavaScript JQuery REGEX SCRIPT WordPress Program Internet WEB Source Code Design Develop Tool Class Function.</div>
    </div>
    <div class="slider-box3">
        <div class="left"><br /><center>T<br />A<br />B<br />3</center></div>
        <div class="content">LxC Blog SEO PHP AJAX CSS JS JavaScript JQuery REGEX SCRIPT WordPress Program Internet WEB Source Code Design Develop Tool Class Function
LxC Blog SEO PHP AJAX CSS JS JavaScript JQuery REGEX SCRIPT WordPress Program Internet WEB Source Code Design Develop Tool Class Function.</div>
    </div>
    <div class="slider-box4">
        <div class="left"><br /><center>T<br />A<br />B<br />4</center></div>
        <div class="content">LxC Blog SEO PHP AJAX CSS JS JavaScript JQuery REGEX SCRIPT WordPress Program Internet WEB Source Code Design Develop Tool Class Function
LxC Blog SEO PHP AJAX CSS JS JavaScript JQuery REGEX SCRIPT WordPress Program Internet WEB Source Code Design Develop Tool Class Function.</div>
    </div>
    <div class="slider-box5">
        <div class="left"><br /><center>T<br />A<br />B<br />5</center></div>
        <div class="content">LxC Blog SEO PHP AJAX CSS JS JavaScript JQuery REGEX SCRIPT WordPress Program Internet WEB Source Code Design Develop Tool Class Function
LxC Blog SEO PHP AJAX CSS JS JavaScript JQuery REGEX SCRIPT WordPress Program Internet WEB Source Code Design Develop Tool Class Function.</div>
    </div>
</div>

Hope you liked JQuery Horizontal Slider Sliding doors, tabs Accordion style. Please feel free to ask questions or leave a comment. You can download files here.

Thank you for visiting.

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.