accordion -nice

by ian_smithz

HTML

<html>
<body>
<div id="content">
    <div id="div1">
        Content

        <div id="accordion">
            <h3>Sample Header 1</h3>
            <div>
                <p>
                    Sample<br />
                    More Sample Text<br />
                    Yet More Sample Text<br />
                    I wish I could come up with something more clever<br />
                    This should be enough for you to see the problem
                </p>
                <p>
                    Sample<br />
                    More Sample Text<br />
                    Yet More Sample Text<br />
                    I wish I could come up with something more clever<br />
                    This should be enough for you to see the problem
                </p>
            </div>
            <h3>Sample Header 2</h3>
            <div>
                <p>
                    Sample<br />
                    More Sample Text<br />
                    Yet More Sample Text<br />
                    I wish I could come up with something more clever<br />
                    This should be enough for you to see the problem
                </p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

CSS

#accordion {
    width: 600px;
    border: 1px solid #C0C0C0;
    border-bottom: none;
    box-shadow: 0 0 5px #C0C0C0;
    -webkit-box-shadow: 0 0 5px #C0C0C0;
    margin: 30px auto;
    background: #FFF;
}

#accordion h3 {
    border-bottom: 1px solid #C0C0C0;
    padding: 10px;
}

#accordion div {
    position: relative;
    display:none;
    padding: 20px;
    border-bottom: 1px solid #C0C0C0;
    background: #F4F4F4;
}

#accordion p {
    padding: 0;
    margin: 0;
}

#accordion h3:hover {
    cursor: pointer;
}

JavaScript

$('#accordion h3').click(function(){
    $(this).next().slideDown().siblings('div').slideUp();
});