I wanna create a functionality where on clicking a (minus) button a div show slide up and and the image should change to (plus). Again on clicking the plus button. the content div should slide back out
jQuery code
$(document).ready(function () {
$('.hide').click(function () {
$('.content-a').slideUp();
$(this).attr("src", "images/show.png").addClass("show");
});
$('.show').click(function () {
alert(1)
$('content-a').slideDown();
$(this).attr("src", "images/show.png").removeClass("show");
});
});
HTML Code
<div class="funda_groups">
<h1>Funda Stars</h1>
<div class="show-hide"><img class="hide" src="images/hide.png" width="16" height="16" alt="hide" /></div>
<div class="content-a">
<div class="left_arrow"><img src="images/funda_left_arrow.gif" alt="leftarrow" /></div>
<div class="f_g_con">
<ul>
<li>
<div class="l_img"><img src="images/greay-img.gif" alt="grey" /></div>
<div class="r_con">
<h2><a href="#">Deepak Jha</a></h2>
<div class="degi">Senior vice president</div>
<div class="company_name">Your Company</div>
</div>
</li>
<li>
<div class="l_img"><img src="images/greay-img.gif" alt="grey" /></div>
<div class="r_con">
<h2><a href="#">Deepak Jha</a></h2>
<div class="degi">Senior vice president</div>
<div class="company_name">Your Company</div>
</div>
</li>
<li>
<div class="l_img"><img src="images/greay-img.gif" alt="grey" /></div>
<div class="r_con">
<h2><a href="#">Deepak Jha</a></h2>
<div class="degi">Senior vice president</div>
<div class="company_name">Your Company</div>
</div>
</li>
</ul>
</div>
<div class="right_arrow"><img src="images/funda_right_arrow.gif" alt="rightarrow" /></div>
</div>
<div class="clear"></div>
</div>