CODEWITHSUNDEEP
jqueryhtml
user3622838
user3622838

Reputation: 15

Showing and hiding divs using jquery didnt work in my code

Hi my code doesnt seem to work when clicking the button but the divs wont hide/show, is there something that I might mistyped or wrong code? THanks for your help will be waiting for help.

And if there are more other simple show/hide methods that I can implement on this then feel free to comment

<!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>Untitled Document</title>
<style>
body{
background-color:#999;  
}
#container{
width:580px;
height:200px;
margin:20px auto;
background-color:#F0F;
border-radius:0.9em;    
}
#container1{
width:580px;
height:200px;
margin: 20px auto;
background-color:#0FF;
border-radius:0.9em;    
}
#menu{
width:580px;
background-color:#FF3;
border-radius:0.9em;
margin:auto;    
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){    
$("#container").toggle();
});
$(".btn2").click(function(){
$("#container1").toggle();
});
});
</script>
</head>
<body>
<div id="menu" align="center">
<button class="btn1">SHOW1</button>
<button class="btn2">SHOW2</button>
</div>
<div id="container">
</div>
<div id="container1">
</div>
</body>
</html>

Upvotes: 0

Views: 61

Answers (3)

Runny
Runny

Reputation: 9

I think this code will help u

here is the example done from your code

http://jsfiddle.net/2Amgm/

 $(".btn1").on("click",function(){
    $("#container").toggle();
    });

  $(".btn2").on("click",function(){
    $("#container1").toggle();
    });

Upvotes: 0

Richa
Richa

Reputation: 3289

See it working here Fiddle

You need to add appropriate Jquery link

Add this

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

Upvotes: 2

Mark Miller
Mark Miller

Reputation: 7447

Try adding this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Upvotes: 2

Related Questions