CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user623990
user623990

Reputation:

Why isn't this simple jQuery working?

jQuery:

<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"/>
$(document).ready({
   $(".title").click(function(){
      var descID = $(this).attr("id");
      var newID = "#"+descID+"d";
      $(newID).slideToggle('slow');
   });
});

HTML: 

<span id="3" class="title">title</span>
<span id="3d" class="description">description</span>

CSS:

.description {
    display: none;
}

Not a jQuery/javascript expert. What am I missing? I'm trying to get the appropriate description to slide toggle while clicking on the proper title. Right now I don't see anything happen.

Upvotes: 1

Views: 803

Answers (4)

RvdK
RvdK

Reputation: 19790

You forgot the function() part. And a opening and closing script tag, as others pointed out.

<script type="text/javascript">
    $(document).ready( function(){
       $(".title").click(function(){
          var descID = $(this).attr("id");
          var newID = "#"+descID+"d";
          $(newID).slideToggle('slow');
       });
    });
</script>

Test your site here: jsfiddle

Upvotes: 1

ebaxt
ebaxt

Reputation: 8417

You are missing a function after: $(document).ready(

Should be:

<html>
<head>
...
    <style type="text/css">
        .description {
            display: none;
        }
    </style>
</head>
<body>
<span id="3" class="title">title</span>
<span id="3d" class="description">description</span>
<script type="text/javascript">
    $(document).ready(function() {
        $(".title").click(function () {
            var descID = $(this).attr("id");
            var newID = "#" + descID + "d";
            $(newID).slideToggle('slow');
        });
    });
</script>
</body>
</html>

Upvotes: 5

tvanfosson
tvanfosson

Reputation: 532435

There are a fair number of errors. Corrected and documented inline.

<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script> <!-- script tags shouldn't self close, non-standard -->
<script type="text/javascript"> <!-- open script tag for inline scripts -->
$(document).ready(function() { <!-- need function definition for ready event handler
   $(".title").click(function(){
      var descID = $(this).attr("id");
      var newID = "#"+descID+"d";
      $(newID).slideToggle('slow');
   });
});
</script> <!-- end script tag -->

Upvotes: 2

Ben Taitelbaum
Ben Taitelbaum

Reputation: 7403

You need to pass a function to ready, and you're passing an object-literal by accident.

You can use this to play around with the example (I love jsfiddle!) http://jsfiddle.net/hmdrP/

There's also a shortcut, $(function() { ... }) which is equivalent.

Upvotes: 0

Related Questions