slideToggle doesn't work jquery

Question

I've recently been trying jQuery and I have tried to create a spring like object, but there seems to be some problem with slideToggle(). Any help?

HTML

<table>
    <td>
        <div class="header">Spring!</div>
        <div class="footer">Spring!</div>
        <div class="header">Spring!</div>
        <div class="footer">Spring!</div>
        <div class="header">Spring!</div>
        <div class="footer">Spring!</div>
        <div class="header">Spring!</div>
        <div class="footer">Spring!</div>
        <div class="header">Spring!</div>
        <div class="footer">Spring!</div>
        <div class="header">Spring!</div>
        <div class="footer">Spring!</div>
    </td>
</table>

CSS

  .header {
    background-color: #ffffff;
    padding: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    cursor: pointer;
}
.footer {
    background-color: #cccccc;
    padding: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
}

jQuery:

$(document).ready(function () {
    $(".header").hover(function () {
        $(".footer").slideToggle();
    }
}

score 1 · Answer 1 · answered Nov 23 '13 at 18:48

1

I think you just forgot some )

$(document).ready(function () {
    $(".header").hover(function () {
        $(".footer").slideToggle();
    }) //forgot a ")" here
})  //forgot a ")" here

Fiddle

answered Nov 23 '13 at 18:48

Sergio

28,539
11
85
132

Joke_Sense10 · Answer 2 · 2013-11-23T18:58:23.417

Your missing brackets and semi-colons.Try this:

$(document).ready(function(){
    $(".header").hover(function(){
        $(".footer").slideToggle();
    }); //here you were missing ")" and ";"
}); //here you were missing ")" and ";"

Updated answer:

I suggested you to use .on() method instead of shorthand operator. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers. You can also do like this:

$(document).ready(function(){
    $(document).on('mouseenter','.header',function(){
        $(".footer").slideToggle();
    }).on('mouseleave','.header',  function(){
       $(".footer").slideToggle();
   });
});

Demo: http://jsfiddle.net/MsC9k/1/

score 0 · Answer 3 · answered Nov 23 '13 at 18:51

0

Only your script needs to be corrected:

<script type="text/javascript">
$(document).ready(function(){
    $(".header").hover(function(){
        $(".footer").slideToggle();
    });
});

answered Nov 23 '13 at 18:51

Ashok Kumar Gupta

984
7
9

Also its nothing to do with JS but a "tr" has also been missed. :) – Ashok Kumar Gupta Nov 23 '13 at 18:52

slideToggle doesn't work jquery

3 Answers3

Fiddle