0

Its a simple one. But i just confused.

Here is jquery code:

<!DOCTYPE HTML>
<html>
<head>
<title>Jquery </title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
<h2>welcome to jquery</h2>
<p>Jquery is invented by John Resig</p>
<button id="button">submit</button>
<script>
$(document).ready(function() {
$("button").click(function() {
$("h2").slideDown(400);
});
});
</script>
</body>
</html>

But it is not working, but slideUp() is working fine.

May i know why? what is my mistake?

Thanks in advance.

sona
  • 93
  • 1
  • 2
  • 8

3 Answers3

0

First you need to hide content which you want to slideDown after that it will work see below example

<!DOCTYPE HTML>
<html>
<head>
<title>Jquery </title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
<h2 style="display:none;">welcome to jquery</h2>
<p>Jquery is invented by John Resig</p>
<button id="button">submit</button>
<script>
$(document).ready(function() {
$("button").click(function() {
$("h2").slideDown(400);
});
});
</script>
</body>
</html>
Yogesh Sharma
  • 2,017
  • 1
  • 15
  • 33
  • may i know, why display:none; ? @Yogesh Sharma: – sona Mar 04 '15 at 12:34
  • Because slidedown function work to show hidden content, first it show content if content is hide by defualt. let's think if content is already visible then what it will do? – Yogesh Sharma Mar 04 '15 at 12:36
  • If you want to show content and want it ti slide down then only possible solution is fisrt do it slideUp and the you can slideDown this is only way to do this – Yogesh Sharma Mar 04 '15 at 12:37
  • so ,, content->hide(already)->show(want to show) means, use slideDown(); and content ->show(already)->hide(want to hide) means, use slideUp(); right? – sona Mar 04 '15 at 12:42
  • I mean if you want to apply both slideUp and slideDown then it's possible, in this case content will show by defualt then click it will hide with slideUp and then it will show again with slideDown – Yogesh Sharma Mar 04 '15 at 12:44
  • one more think.,that means, we use hide() or show() right.. ? Why we use slideUp() and slideDown()? Thanks.. – sona Mar 04 '15 at 17:58
  • Actually SlideUp and slide down gives animation effect – Yogesh Sharma Mar 04 '15 at 18:31
  • Please read http://stackoverflow.com/questions/7187476/what-is-the-difference-between-jquerys-hide-and-slidedown-slideup post for more information – Yogesh Sharma Mar 04 '15 at 18:32
0

You can try this:Actually that h2 is in slideDown ,so if u apply slideDown it does not work.you can do two ways one is make the h2 display:none or hide the he using jquery.then you can call slideDown

$(document).ready(function() {
   $("h2").hide();
   $("button").click(function() {
     $("h2").slideDown(400);
   });
});
Pioter
  • 465
  • 3
  • 8
  • 21
0

Use this Demo Here

$(document).ready(function() {
$("button").click(function() {

    if($('h2').attr('style') == "display:none;")  {  
$("h2").slideDown(400);
    }else{
   $("h2").slideUp(400);     
    }
});
});
I'm Geeker
  • 4,601
  • 5
  • 22
  • 41