Posted by: Kathirvel K on: July 1, 2011
jQuery Code:
<script type="text/javascript" >
jQuery(document).ready(function()
{
jQuery(".AccordionMenu .AccordionHeader").click(function()
{
jQuery(this).css({backgroundImage:"url(Open.png)"}).next("div.AccordionContent").slideDown('slow', function() {
if (jQuery(this).is(':visible')) {
jQuery(this).siblings("div.AccordionContent").slideUp("slow").siblings(".AccordionHeader").css({backgroundImage:"url(Close.png)"});
jQuery(this).prev(".AccordionHeader").css({backgroundImage:"url(Open.png)"})
} else {
jQuery(this).siblings(".AccordionHeader").css({backgroundImage:"url(Close.png)"});
}
});
});
});
</script>
CSS Code:
<style>
.AccordionHeader { background: transparent url(Close.png) center right no-repeat; position:relative;padding: 7px 10px; cursor: pointer; margin:1px; font-weight:bold;color:#FFFFFF;height: 22px; }
.AccordionContent { display:none; background: #FFFFFF !important; border: 1px solid #B0C5CE; padding: 5px; }
</style>
HTML Code:
<div class="AccordionHeader">My Header </div>
<div class="AccordionContent">
<p>
-- your content goes here --
</p>
<div>
<div class="AccordionHeader">My Header </div>
<div class="AccordionContent">
<p>
-- your content goes here --
</p>
<div>
<div class="AccordionHeader">My Header </div>
<div class="AccordionContent">
<p>
-- your content goes here --
</p>
<div>
<div class="AccordionHeader">My Header </div>
<div class="AccordionContent">
<p>
-- your content goes here --
</p>
<div>
