CODEWITHSUNDEEP
jqueryhtmlcss
corybranan
corybranan

Reputation: 31

Slide toggle not working inside table

I have the below code and for the life of my I cann't figure out why it isn't working. Any help would be greatly appreciated. Thanks

<!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=iso-8859-1" />
<title>Simple Tabs with CSS &amp; jQuery</title>
<style type="text/css">
body {
margin:1em;
padding:0;
height:100%;
background-color:#cbcbcb;
color:#000000;  
text-align:center;
font-family:Arial, Helvetica, sans-serif;
border-style: thin;
}

h1 {font-size: 3em; margin: 20px 0;}
.hidden{
 background-color:gray;
 width:120px;
 text-decoration:none;
 font-size:x-large;
 color:black;
 display:none;
 border:thin;
 border-bottom-color:gray;
}

<script type="text/javascript">

$(document).ready(function() {
$("#button").click(function () {
$(".hidden").slideToggle(200);
});
<body>
<div class="hidden">woot</div>
<table style="width: 100%" cellspacing="1" class="style1">
 <tr>
  <td class="style1">Username</td>
  <td class="style1">Last Name</td>
  <td class="style1">First Name</td>
  <td class="style1">MI</td>
  <td class="style1">Address</td>
  <td class="style1">Email</td>
  <td class="style1">Age</td>
  <td class="style2"><p id="button"><a href="#">Toggle</a></p>&nbsp;</td>
 </tr>
</table>
</body>

Upvotes: 0

Views: 1092

Answers (3)

Paul
Paul

Reputation: 6218

What exactly do you mean, not working? Is this the full code to your page?

If so:

  • Your script tag isn't closed
  • Your head tag isn't closed
  • You are missing the closing });
  • You are not including the jQuery script

Upvotes: 2

alexn
alexn

Reputation: 58962

You're missing closing }); javascript, update it to:

$(document).ready(function() {
    $("#button").click(function () {
        $(".hidden").slideToggle(200);
    });
});

Working fiddle http://jsfiddle.net/rKYSB/

Upvotes: 0

user113716
user113716

Reputation: 322492

You're missing the closing }); and the closing </script> and </style> tags.

$(document).ready(function() {
    $("#button").click(function () {
        $(".hidden").slideToggle(200);
    });
});

Proper indentation reveals much. :o)

Upvotes: 1

Related Questions