Create a Vertical Accordion slider using pure css3 and html

Create a Vertical Accordion slider using pure css3 and html

Isn’t it just amazing with the kind of things you can accomplish using css3 now days. Today I have a great tutorial that I think you all will love and it involves css3 transitions. In this tutorial I wish teach you how to make a vertical and horizontal accordion slider enjoy!

 

The head section

Create a new folder on your desktop or wherever you’d like and create your index.html , and style.css files. Since css3 only works in moderen browsers our good ol buddie Internet explorer does not want to play correctly so we will have to use js and ie stylesheets to target it.

Insert the code below into your head section.

<link rel="stylesheet" type="text/css" href="styles/accordion.css">
 

The code above tells are html document to look for they styleheets accordion.css and style.css and that is how we will retrive our look.

The code below targets Internet Explorer 6-8(IE). You can use which ever version you would like I prefer just styling for ie 8 and 9. We also will be adding javascript so that our transitions work properly in Internet Explorer.

<!-- ========== IE FIX ========== -->
    <!--[if IE]><link rel="stylesheet" type="text/css" href="styles/accordion_ie.css" /><![endif]-->
 
    <!-- ========== IE6-8 TARGET FALLBACK ========== -->
    <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
    <!--[if (gte IE 6)&(lte IE 8)]>
    <script type="text/javascript" src="js/ie-target.js"></script>
    <script type="text/javascript" src="js/selectivizr-min.js"></script>
    <noscript><link rel="stylesheet" href="styles/accordion.css" /></noscript>
    <![endif]-->

The Markup

Now that the head section of our html is completed we will now start on the markup. The code below is basically what are accordian slider is going to look like in markup language. Confuse? Let me explain. I have created a accordion-container to contain our slider the since the accordion slider will be easier to target using lists. I have added ul tags to contain our list and li tags to define our list.

The first li is just for our title. It has a class assigned to it so we can remove the styling from that specific li. The li below our title is one accordion. We will have 5 all together. All 5 accordions will have a class of block but their id’s will be unquie. If you look at block one below you notice it has a class of block but a id of block_1. It also has a href of block_1 and that is so when our accordion slides it knows where to go.

<div class="accordion-container">
    <!--accordion-->
    <ul>
        <li class="block_header">CSS3 Horizontal Accordion</li>
        <li class="block" id="block_1"><a class="header" href="#block_1">Slide 1: Click me and watch what happens!</a>< class="arrow"></>
            <div>
                <p>Nam eu mollis tincidunt, risus dolor sit amet dui. Morbi mattis. Aliquam et velit. Vivamus nibh. Phasellus libero ornare mi odio, in faucibus in, libero. Sed interdum wisi magna, sollicitudin turpis et ultrices interdum. Etiam.</p>
                <p>Suspendisse elit. Cum sociis natoque penatibus et netus et augue. Praesent a nunc. Donec elementum eros et netus et ultrices consectetuer. Sed tincidunt justo. Ut sodales, dictum arcu. Cras rhoncus eget, velit. Integer tincidunt vel.</p>
            </div>
        </li>
  </ul>
 </div><!--end of accordion-container-->

Now lets add the rest of our accordions. For accordion slide 2 we will asign a clas of block to it just like block one but since it is accordion 2 we will give it an id of block_2. Since we have our markup ready to go just repeat this step 3 more times and change block_2 to block_3, block_4 etc.

<li class="block" id="block_2"><a class="header" href="#block_2">Slide 2: Click me and watch what happens!</a>< class="arrow"></>
    <div>
        <p>Lorem ipsum dolor sit amet felis. Maecenas in nibh eu fermentum ut, nonummy risus ornare at, aliquet elit, dictum vel, purus. Aliquam risus risus tortor, fermentum suscipit vitae, lorem. Mauris vel massa. Nulla nec felis.</p>
        <p>Sed viverra ipsum id urna tempus scelerisque. Integer consequat consequat massa quis adipiscing. Vivamus elit velit, condimentum in convallis eu, rutrum laoreet lorem. Maecenas fringilla, urna vitae pretium sollicitudin, nunc justo convallis lectus, et congue sem sem nec nulla.</p>
        <p>Cum sociis natoque penatibus et rhoncus interdum, tortor orci dui, non sem. Aenean facilisis dignissim porttitor, arcu quis justo. Vestibulum non purus. Pellentesque sed justo. In hac habitasse platea dictumst. Suspendisse turpis mauris sed nunc.</p>
        <p>Nam eu mollis tincidunt, risus dolor sit amet dui. Morbi mattis. Aliquam et velit. Vivamus nibh. Phasellus libero ornare mi odio, in faucibus in, libero. Sed interdum wisi magna, sollicitudin turpis et ultrices interdum. Etiam.</p>
        <p>Suspendisse elit. Cum sociis natoque penatibus et netus et augue. Praesent a nunc. Donec elementum eros et netus et ultrices consectetuer. Sed tincidunt justo. Ut sodales, dictum arcu. Cras rhoncus eget, velit. Integer tincidunt vel.</p>
    </div>
</li>

Making it look pretty

Now that we’ve added our html it is time to make our accordion look pretty using css(3).

For the css3 I used transitions which allowed our accordion to slide vertically. We will begin styling our accordion container(Holds the accordion). I applied a width of 500px(can be anysize) to it and have given it some padding, added font size etc.

.accordion-container {
    width: 500px;   /* total width = 510 */
    height: 100%;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
    font-family: arial, sans-serif;
    font-size: 13px;
    line-height: normal;
    /* CSS3 radius */
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-background-clip: padding-box;
}
 
.accordion-container a {
    font-family: arial, sans-serif;
    font-size: 13px;
    line-height: normal;
    text-decoration: none;
    outline: none;
}
 
.accordion-container a:hover {
    text-decoration: underline;
}

Next we will begin styling our ul and li tags. The li tag is what we are most concerned with considering it controls the styling of our text and title. If you look carefully through the code below you wil see I have targeted li tags and given them all some sort of styling. It is also important to remember the heriacy of classes and id’s when styling.

.accordion-container ul,
.accordion-container li {
    padding: 0px;
    margin: 0px;
    list-style: none;
    line-height: normal;
}
 
.accordion-container li.block_header {
    width: 100%;
    height: 20px;   /* total height = 38 */
    padding: 8px 10px 10px 10px;
    font-weight: bold;
}
 
.accordion-container li.block .arrow {
    width: 0px;
    height: 0px;
    float: right;
    margin-top: -22px;
    margin-right: 10px;
    visibility: visible;
    background-color: transparent;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-bottom: 0;
}
 
.accordion-container li.block a.header {
    height: 20px;
    padding: 10px 10px 8px 10px;
    display: block;
    /* CSS3 transition */
    -webkit-transition: padding-left 0.1s ease-out;
    -moz-transition: padding-left 0.1s ease-out;
    -o-transition: padding-left 0.1s ease-out;
    -ms-transition: padding-left 0.1s ease-out;
    transition: padding-left 0.1s ease-out;
}
 
.accordion-container li.block a.header:hover {
    text-decoration: none !important;
    padding-left: 20px;
}
 
.accordion-container li.block  {
    height: 0px;
    visibility: hidden;
    overflow: hidden;
    /* CSS3 transition */
    -webkit-transition: height 0.3s ease-in-out;
    -moz-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;
    -ms-transition: height 0.3s ease-in-out;
    transition: height 0.3s ease-in-out;
}
 
.accordion-container li.block  p {
    padding: 10px 10px 10px 10px;
    margin: 0px;
    position: relative;
    top: 50px;
}
 
.accordion-container li.block:target,
.accordion-container li.block.target {
    width: 100%;
}
 
.accordion-container li.block:target a.header,
.accordion-container li.block.target a.header {
    font-weight: bold;
}
 
.accordion-container li:target ,
.accordion-container li.target  {
    width: 100%;
    height: 150px;  /* expanded section height */
    visibility: visible;
    overflow: auto;
}
 
.accordion-container li.block:target  p,
.accordion-container li.block.target  p {
    top: 0px;
    z-index: 0;
    /* CSS3 transition */
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
 
.accordion-container li.block:target .arrow,
.accordion-container li.block.target .arrow {
    margin-top: -23px;
}

The Javascript

Now that we’ve added are html and css it is now time to add our javascript. Download the latest version Jquery then save it to your js folder. Then download the ie selectivizr and save it to your js folder.

Now create a new js file name it whatever you would like(remember to call your js files in the head section of your html document). Now add the js code below into your js file.

$(document).ready(function()
{
(function($)
    {
    $.fn.haccordion=function()
        {
            if(($.browser.msie) && ($.browser.version=='7.0'))
            {
                return this.each(function()
                {
                    var $this=$(this);
                    $(this).find('ul li a.header').bind('click',function()
                    {
                        $this.find('ul li.block').removeClass('target');
                        $(this).parent('li.block').addClass('target');
                    });
            });
            };
        };
    })(jQuery);
    $('.accordion-container').haccordion();
})

That is all I hope this tutorial was vauable to you and that you’ve learned something new. If you do not mind please check out some of our other tutorials and subscribe to our rss feed for latest tutorials and updates.

SOURCE - DOWNLOAD - DEMO

More to read:
Pure CSS Vignette
Creating a photo gallery in CSS without tables
CSS3 Animated Bubble Buttons
Create a unique contact form with css3 transitions
SHARE US ON:
Facebook Twitter
Freemarket.com Marketplace

Explore/Tags

Tutorializing.com © 2014 by www.TheBrightBox.com