Accordion Slider with jQuery and CSS3

Accordion slider
File Size:750.03 KB
Views Total:428
Last Update:April 11, 2018
Publish Date:April 11, 2018
Official Website:Go to website
License:MIT

we will create an vertical accordion slider for content. vertical accordion tabs that slide behavior when mouse hover.we are some add images with contents work on hover. We will add some CSS3 properties with little bit code jquery script to enhance the look like good.

How to use :

1. Add the jQuery library and jQuery Photopile plugin’s :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

2. Add markup language

<ul class="accordion" id="accordion">
	<li class="bg1">
		<div class="heading">Heading</div>
		<div class="bgDescription"></div>
		<div class="description">
			<h2>Heading</h2>
			<p>Some descriptive text</p>
			<a href="#">more ?</a>
		</div>
	</li>
</ul>

3. Add  style for the list will look as follows:

ul.accordion{
    list-style:none;
    position:absolute;
    right:80px;
    top:0px;
    font-family: Cambria, serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.5em;
}
ul.accordion li{
    float:right;
    width:115px;
    height:480px;
    display:block;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    -moz-box-shadow:1px 3px 15px #555;
    -webkit-box-shadow:1px 3px 15px #555;
    box-shadow:1px 3px 15px #555;
}
ul.accordion li.bg1{
    background-image:url(../images/1.jpg);
}
ul.accordion li.bg2{
    background-image:url(../images/2.jpg);
}
ul.accordion li.bg3{
    background-image:url(../images/3.jpg);
}
ul.accordion li.bg4{
    background-image:url(../images/4.jpg);
}

4. Add script function that makes a list element slide out when hovering over it. :

<script type="text/javascript">
$(function() {
    $('#accordion > li').hover(
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'480px'},500);
            $('.heading',$this).stop(true,true).fadeOut();
            $('.bgDescription',$this).stop(true,true).slideDown(500);
            $('.description',$this).stop(true,true).fadeIn();
        },
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'115px'},1000);
            $('.heading',$this).stop(true,true).fadeIn();
            $('.description',$this).stop(true,true).fadeOut(500);
            $('.bgDescription',$this).stop(true,true).slideUp(700);
        }
    );
});
</script>

Done