Creating Accordion using jquery is now so easy. :)


Html Code :

<div style=”width: 80%;overflow: hidden;margin-left: 20px;”>
<div class=”accordion”>
<h3>Title 1</h3>
<div style=”display: none”>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
<h3>Title 2</h3>
<div style=”display: none”>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
<h3>Title 3</h3>
<div style=”display: none”>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
</div>
</div>

Style Sheet :

.accordion h3 {
background: none repeat scroll 0 0 #BFCD93;
border-bottom: 1px solid #386785;
border-top: 1px solid #386785;
cursor: pointer;
margin: 0;
padding: 5px;
width: 100%;
}
.accordion div {
padding: 1em 0.25em 0.5em;
width: 100%;
}

Script :

<script type=”text/javascript”>
$(document).ready(function() {
$(‘div.accordion> div’).hide();
$(‘div.accordion> h3’).click(function() {
$(this).next(‘div’).slideToggle(‘fast’)
.siblings(‘div:visible’).slideUp(‘fast’);
});
});
</script>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s