www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] jQuery toggle show/hide div - overlapping content?

  1. #1
    Join Date
    Dec 2004
    Posts
    88

    resolved [RESOLVED] jQuery toggle show/hide div - overlapping content?

    Hi.

    I have the following show/hide div function made with jQuery:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JQuery Collapse</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function () {
    
        $("#header").click(function (event) {
            event.preventDefault();
            $("#box").slideToggle();
        });
    
        $("#box a").click(function (event) {
            event.preventDefault();
            $("#box").slideUp();
        });
    });
    </script>
    <style type="text/css">
    body {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #000;	
    }
    a {
    	color:#930;
    	text-decoration:none;
    }
    
    a:active, a:focus {
    	outline: none;
    
    }
    #header {
    	display:block;
    	width:190px;
    	height:20px;
    	padding:5px;
    	background:#ddd url(/files/box.jpg) no-repeat;
    	
    }
    #box {
    	width:188px;
    	display: none;
    	padding:5px;
    	border:1px solid #ddd;
    	background-color:#eee;
    }
    
    #content {
      	background: #ccc;
      	border: 15px solid #999;
      	padding: 15px;
      	width:270px;
      }
    </style>
    </head>
    <body>
    <a href="#" id="header">Click to toggle visibility</a>
    
    <div id="box">
    <a href="#" class="close">[x]</a>
    <p>Display drop down content</p>
    </div>
    <div id="content"><strong>Title in bold</strong><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>
    </body>
    </html>
    It toggles perfectly, but I would like to make to which appears to overlap the underlaying content div below. Right now it just pushes down the content div when sliding out. How can I achieve this?

    Thanks.
    Last edited by meek; 08-27-2010 at 07:26 AM.

  2. #2
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    this is more of a CSS question really.

    a few things. You may want to consider making #box and #header a class instead, if you want to reuse the same properties on another similar box.

    that aside

    add position:relative; to #header

    and add position:absolute; to #box
    ( this makes #box position itself absolutlely from #header, and making it absolute also takes it out of the normal flow so it will go right over the following content)

  3. #3
    Join Date
    Dec 2004
    Posts
    88
    Hi.

    Thanks a lot for your reply. It works like a charm. Didn't know it was that simple. And you're right - I will change the ids into classes.

    Thanks again.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles