Click slide up and down. doesnt work

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>

An easier solution would be to do something like:

$(document).ready(function () {
$(“a.toggle”).click(function() {
$(this).toggleClass(“showHide”);
$(“content-a”).slideToggle();
}
});

Where your showHide css class would contain a background image which changes it x/y coords.

As you’re using jQuery, you ma want to check out a plugin called tree view. Here’s a [url=“http://jquery.bassistance.de/treeview/demo/”]demo page showing the different ways that it can be used.