SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    issue with toggle

    Below is test code I'm looking at to get a simple toggle out when I click on toggle link:

    The <h2> tage and <a> tag shifts below the <p> block even though it's wrapped in the code.

    Any help with this would be great.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("a").click(function(){
        $("p").toggle();
      });
    });
    </script>
    </head>
    <body>
    
    <p style = "width:100%;height:200px;background-color:lightblue;">
    <h2 style = "float:left;">This is a heading.</h2>
    <a href="#" style = "float:right;">Toggle</a>
    </p>
    
    </body>
    </html>

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

    The problem isn't jQuery, it's rather that your markup is invalid and the browser is rendering the <h2> tag and the <a> tag outside of the containing <p> tag.

    To see what I mean, change your code to this:

    HTML Code:
    <!DOCTYPE html>
    <html>
      <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
          $("a").click(function(){
            $("div").toggle();
          });
        });
        </script>
      </head>
      
      <body>
        <div style="width:100%;height:200px;background-color:lightblue;">
          <h2 style = "float:left;">This is a heading.</h2>
          <a href="#" style = "float:right;">Toggle</a>
        </div>
      </body>
    </html>


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
  •