1

Possible Duplicate:
jQuery - How to Use slideDown (or show) function on a table row?

I have this structure, of the page: table cell expands when the mouse over it, and what I want is to slide down first div after this particular cell. I made my sliding div out of the <section> tag because I don't want it to be part of the table.

As you can see in my example slideDown function doesn't do anything, (may be I just made some mistake =) ) so here is the fiddle http://jsfiddle.net/9FC9D/1/

Community
  • 1
  • 1
Vor
  • 33,215
  • 43
  • 135
  • 193
  • slideDown/Up doesn't work inside of tables, or on elements with `display:table-row/table-cell`. See [this question](http://stackoverflow.com/questions/467336/jquery-how-to-use-slidedown-or-show-function-on-a-table-row/) for workarounds. – Blazemonger Jan 15 '13 at 22:43

1 Answers1

3

Your jsFiddle had a couple of issues:

a) jQuery wasn't being applied b) You were binding the hover event to the wrong element (".box" rather than "section", and ".box" was an empty div without any layout).

It looked as if something was happening on hover but this was coming from the CSS rather the JS. I've tweaked your fiddle (http://jsfiddle.net/9FC9D/4/) so that your function is executed on hover (and changed it to slideToggle, otherwise you need to define an "in" function and an "out" function - see http://api.jquery.com/hover/ for more information).

Here's the updated jQuery:

$(document).ready(function () {
    $("#wrapper section").hover(function() {
        $(this).next('.box-content').slideToggle(500);
    }); 
});

You still have some styling issues from your CSS - still not 100% sure what you're looking to achieve but happy to advise on those issues if you provide some more information on the desired effect.

JonKers
  • 381
  • 1
  • 4