Simple jquery accordion type divs

by ravimallya

HTML

<div class="accordion">
    <div class="accordion-header">Menu One</div>
    <div class="accordion-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        Lorem Ipsum has been the industry's standard dummy text ever since the
        1500s, when an unknown printer took a galley of type and scrambled it to
        make a type specimen book.</div>
    <div class="accordion-header">Menu Two</div>
    <div class="accordion-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        Lorem Ipsum has been the industry's standard dummy text ever since the
        1500s, when an unknown printer took a galley of type and scrambled it to
        make a type specimen book.</div>
    <div class="accordion-header">Menu Two</div>
    <div class="accordion-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        Lorem Ipsum has been the industry's standard dummy text ever since the
        1500s, when an unknown printer took a galley of type and scrambled it to
        make a type specimen book.</div>
    <div class="accordion-header">Menu Two</div>
    <div class="accordion-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        Lorem Ipsum has been the industry's standard dummy text ever since the
        1500s, when an unknown printer took a galley of type and scrambled it to
        make a type specimen book.</div>
    <div class="accordion-header">Menu three</div>
    <div class="accordion-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        Lorem Ipsum has been the industry's standard dummy text ever since the
        1500s, when an unknown printer took a galley of type and scrambled it to
        make a type specimen book.</div>
</div>

CSS

body {
    font-family: Calibri, Arial;
    font-size:14px;
}
.accordion {
    padding: 0 0 0 0;
    margin:0;
}
.accordion .accordion-header {
    background-color: #FF9927;
    border:1px solid #FF9927;
    font-weight: bold;
    margin-bottom: 1px;
    cursor: pointer;
    padding: 5px 5px 5px 6px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.accordion .accordion-content {
    margin-bottom:2px;
    padding: 10px;
    display: none;
    border-bottom:1px solid #FF9927;
    border-left:1px solid #FF9927;
    border-right:1px solid #FF9927;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

JavaScript

$(function () {
    $(".accordion > .accordion-header").click(function () {
        if (false === $(this).next().is(':visible')) {
            $('.accordion > .accordion-content').slideUp(300);
        }
        $(this).next().slideToggle(300);
    });
    $('.accordion > .accordion-content:eq(0)').show(); //change it to hide() to hide the first tab on load
});