asked on

How to get this div to slide after page loads and not on a mouse click?

Calling JQuery geniuses:

How do do you this please where the sliding div automatically animates when the page has finished loading?

I know that this is the essential part:

$(document).ready(function() {
  $('#slidebottom button').click(function() {
    $(this).next().slideToggle();
  });

Open in new window

Thank you in advance.

The page with CSS and divs.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.slide {
  position: relative;
  overflow: hidden;
  height: 120px;
  width: 350px;
  margin: 1em 0;
  background-color: #ffc;
  border: 1px solid #999;
}
.slide .inner {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 338px;
	height: 36px;
	padding: 6px;
	background-color: #9CF;
	color: #333;
}

.slide button {
  margin: .7em 0 0 .7em;
}
.js #slidebottom .inner { 
  display: none;
}
</style>    
<script type="text/javascript">
  document.documentElement.className = 'js';
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {
  $('#slidebottom button').click(function() {
    $(this).next().slideToggle();
  });


  
});

</script>



</head>

<body>
  <div id="slidebottom" class="slide">
    <button>slide it</button>
    <div class="inner">Slide from bottom</div>
  </div>


</body>
</html>

Open in new window

$(document).ready(function() {
  $('#slidebottom button').click(function() {
    $(this).next().slideToggle();
  });

Open in new window

Gurvinder Pal Singh

$(document).ready(function() {
setTimeout(function(){
$('#slidebottom button').next().slideToggle();
}, 1500);
});

colonelblue

ASKER

Hello gurvinder372.

Just one question please.
It works brilliantly but when I remove the button ( I want the div to be just content ) it doesn't slide anymore.
How do I get your code to work wihout the button.

Thank you so very much.

Gurvinder Pal Singh

in that case, you need to give an id to that sliding content. Since, currently you are traversing to that div via that button only.

If you cannot give id to that sliding div, then hide the button

colonelblue

ASKER

Hello gurvinder372.

I'm not sure how to do that correctly.
I can't seem to get it to work by removing the button.
I am not much of a coder, but I am trying.

This is what I tried.

<style type="text/css">
.slide {
position: relative;
overflow: hidden;
height: 120px;
width: 350px;
margin: 1em 0;
background-color: #ffc;
border: 1px solid #999;
}
.slide .inner {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 338px;
      height: 36px;
      padding: 6px;
      background-color: #9CF;
      color: #333;
}

.slide button {
margin: .7em 0 0 .7em;
}
.js #slidebottom .inner {
display: none;
}
#content1 {
      font-family: Tahoma, Geneva, sans-serif;
      font-size: 10px;
}
</style>
<script type="text/javascript">
document.documentElement.className = 'js';
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {
setTimeout(function(){
$('#content1').next().slideToggle();
}, 1500);
});

</script>

</head>

<body>
<div id="content1" class="slide">
Hello
<div class="inner">Slide from bottom</div>
</div>

</head>

<body>
<div id="content1" class="slide">
Hello
<div class="inner">Slide from bottom</div>
</div>

ASKER CERTIFIED SOLUTION

Gurvinder Pal Singh

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

colonelblue

ASKER

:) Would you believe it. IT works but instead of the div sliding open, it starts open and closes. I feel so dumb.

colonelblue

ASKER

I figured it out thanks to you!!

Thank you so much.