Accordion

by Annett

HTML

<div class="accordion">
        
            <section id="one">
                <h2><a href="#one">Heading 1</a></h2>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
                </div>
            </section>
            
            <section id="two">
                <h2><a href="#two">Heading 2</a></h2>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
                </div>
            </section>
            
            <section id="three">
                <h2><a href="#three">Heading 3</a></h2>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
                </div>
            </section>
            
            <section id="four">
                <h2><a href="#four">Heading 4</a></h2>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>                                        
               ...

CSS

body
{
    padding: 0;
    margin: 0;
}   

section 
{
    display: block;
} 

.accordion
{
    background-color: #eee;
     border: 1px solid #ccc;
    width: 600px;
    padding: 10px;    
    margin: 50px auto;
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    
    -moz-box-shadow: 0 1px 0 #999;
    -webkit-box-shadow: 0 1px 0 #999;
    box-shadow: 0 1px 0 #999;
}
 
.accordion section 
{
     border-bottom: 1px solid #ccc;
    margin: 5px;
    
    background-color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
    background-image: -webkit-linear-gradient(top, #fff, #eee);
    background-image:    -moz-linear-gradient(top, #fff, #eee);
    background-image:     -ms-linear-gradient(top, #fff, #eee);
    background-image:      -o-linear-gradient(top, #fff, #eee);
    background-image:         linear-gradient(top, #fff, #eee);
  
      -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.accordion h2,
 .accordion p
{
    margin: 0;    
}

.accordion div
{
    height: 150px;
    display: none;
}

.accordion p
{
    padding: 10px;
}
 
.accordion h2 a 
{
    display: block;
    position: relative;
    font: 14px/1 'Trebuchet MS', 'Lucida Sans', Arial, Helvetica;
    padding: 10px;
    color: #333;
    outline: 0;
    text-decoration: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.accordion h2 a:hover 
{
    background: #fff;
}
 
.accordion h2.active a:after 
{  
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -3px;
    border-top: 5px solid #333;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;    
}

JavaScript

(function(){
  var bsa = document.createElement('script');
     bsa.async = true;
     bsa.src = 'http://www.red-team-design.com/js/adpacks-demo.js';
  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script>

<script>
$(document).ready(function(){

    $('.accordion h2').click(function(){
    if( $(this).next().is(':hidden') )
        {
        $('.accordion h2').removeClass('active').next().slideUp();        
        $(this).addClass('active').next().slideDown();
        }
        return false;
    });
});