SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: toggling div

  1. #1
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    toggling div

    hi,

    I have a link and a div tag. The schme is, the div will be invisible and toggled no matter how many content inside. When the link is clicked, the div will be visible. when the button "close" in the div clicked, the div will be back to original state

    How would i achieve that?

    my html mark-up

    HTML Code:
    <a href="#">link</a><br />
    <div>
    <p>start your search here</p> 
    <input type="text" /><input type="submit" value="search" /><br />
    <input type="submit" value="close" />
    </div><br />
    <p>this text is to visualize that the div can toogle, as long as the div closed, this will move to just underneath the link.</p>

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here you go:

    Code html4strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Toggling Div</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
        </head>
        <body>
     
            <a href="#" id="open">link</a><br />
            <div id="toggle-div">
                <p>start your search here</p> 
                <input type="text" /><input type="submit" value="search" /><br />
                <input type="submit" value="close" id="close" />
            </div>
            <br />
            <p>this text is to visualize that the div can toogle, as long as the div closed, this will move to just underneath the link.</p>
     
     
            <script type="text/javascript">
                function getById(id) { return document.getElementById(id); }
                function toggle(element) { element.style.display = (element.style.display==='block') ? 'none' : 'block'; }
                var div = getById('toggle-div');
                div.style.display = 'none';
                getById('open').onclick = function(){
                    toggle(div);
                }
                getById('close').onclick = function(){
                    toggle(div);
                }
            </script>
        </body>
    </html>
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thats a wicked fast reply. Thank you very much

  4. #4
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I find something interesting now.

    If the script is put in head of the document, it wouldn't work. Do you notice that?

    I wonder how come.

  5. #5
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,187
    Mentioned
    17 Post(s)
    Tagged
    4 Thread(s)
    You would need to place the code in a handler for the onload window event. When the script is placed in the head without being a onload handler the elements are not available yet.

  6. #6
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't recommend using the window.onload event. - It's best to keep the script at the bottom of the document (cite: http://developer.yahoo.com/performance/rules.html)
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)


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
  •