Link to home
Start Free TrialLog in
Avatar of Robert Granlund
Robert GranlundFlag for United States of America

asked on

jQuery Slide Toggle

I have a div that I want to show when I click a button.  I want the div to slide down over the other content, not push it down.  I'm not 100% sure how to do this.  What I have here will reveal the div, but it pushes everything down.

<script>
jQuery(document).ready(function() {
	jQuery('.laser-nav-display').click(function() {
		jQuery('.nav-lasers').slideToggle("slow", function() {
			
		});
	});
});
</script>

<style>
header	{
	width:100%;
	min-height:100px;
	max-height: 279px;
	padding:0 0 23px 0;
	position:relative;
	clear:both;
	background-image:url('../images/site_images/header-fade.png');
	background-repeat:repeat-x;
	position:relative;
	z-index:1;
}

.nav-lasers {
	width:100%;
	min-height:400px;
	position:relative;
	z-index:100;
	display:none;
	top:100px;
}
</style>

<html>
<header>
	<nav>
		<ul>
			<li class="laser-nav-display">PRODUCTS</li>
                </ul>
	</nav>

	<div class="nav-lasers" style>
	 <h1>HELLO</h1>
	</div>
</header>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I think the best term is you are looking for a modal type of component.
Jquery and bootstrap both offer great options without a ton of extra work.