SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2008
    Location
    HidePoint
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

    Code JavaScript:
    $(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


    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>

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    As you're using jQuery, you ma want to check out a plugin called tree view. Here's a demo page showing the different ways that it can be used.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •