SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru afridy's Avatar
    Join Date
    Mar 2007
    Posts
    966
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Jquery function to show hide elements

    Hello,

    i am new to jquery.
    i want to modify the below function, so it will accept 2 element names dynamically (in place of #div1, .btn).

    Code:
    $("#div1").click(function(){
      $(".btn").show();
    });

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    I'm not sure I quite understand what you are getting at.

    The code you posted attaches an event handler to the element with an id of "div1"', so that when you click on it any elements with a class of "btn" are shown (have their display property set accordingly).

    Could you describe in a little more detail what you are trying to do.
    If you could post a snippet of HTML that would be great.

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Or are you trying to write a function, which does what I describe above, which you can call thus:
    attachHandler(el1, el2)

    Where el1 is the element to click on and el2 is the element to hide.

  4. #4
    SitePoint Guru afridy's Avatar
    Join Date
    Mar 2007
    Posts
    966
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Or are you trying to write a function, which does what I describe above, which you can call thus:
    attachHandler(el1, el2)

    Where el1 is the element to click on and el2 is the element to hide.
    absolutly i need the syntax for this !

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    This'll work:

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Unbenanntes Dokument</title>
        <style>
          .btn1, .btn2{ display: none; color:red;}
        </style>
      </head>
      
      <body>
        <div id="div1">Click me</div>
        <div class="btn1">Hello!</div>
        
        <div id="div2">Click me, too</div>
        <div class="btn2">Hello again!</div>
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>
          function attachShow(el1, el2){
            $(el1).click(function(){
              $(el2).show();
            });
          }
        
          attachShow("#div1", ".btn1");
          attachShow("#div2", ".btn2");
        </script>
      </body>
    </html>

  6. #6
    SitePoint Guru afridy's Avatar
    Join Date
    Mar 2007
    Posts
    966
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    This'll work:

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Unbenanntes Dokument</title>
        <style>
          .btn1, .btn2{ display: none; color:red;}
        </style>
      </head>
      
      <body>
        <div id="div1">Click me</div>
        <div class="btn1">Hello!</div>
        
        <div id="div2">Click me, too</div>
        <div class="btn2">Hello again!</div>
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>
          function attachShow(el1, el2){
            $(el1).click(function(){
              $(el2).show();
            });
          }
        
          attachShow("#div1", ".btn1");
          attachShow("#div2", ".btn2");
        </script>
      </body>
    </html>
    Excellent example!!! Thanks pullo!!


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
  •