jQuery slidetoggle not working?

Question

I'm just trying to make a small box slide down from the pictureControls div which acts as a button, but slideToggle is doing nothing-- it just sort of glitches into place and back again. Read a ton of other similar questions, none helped or applied.

    $('#pictureControls').click(function(event) {
        $('#pictureControlsMenu').slideToggle(300);
        event.stopPropagation();
    });

But why can I not see the picture resource in the first place? — temporary_user_name, Mar 18 '13 at 14:53
A couple things, real quicklike: 1) You don't have jQuery support turned on in the left sidebar of jsFiddle, and 2) You're trying to use background images with urls pointing at a local directory, which you can't do inside jsFiddle and expect the images to show up. — Jason M. Batchelor, Mar 18 '13 at 14:54
There, fully working fiddle edited in. Except for the slide effect, of course. — temporary_user_name, Mar 18 '13 at 14:56

score 12 · Accepted Answer · answered Mar 18 '13 at 15:22

12

slideToggle wasn't working because the table is not a block element. In the following update I've made it a block element (instead of display:none), and then hidden it on page load with jQuery...

http://jsfiddle.net/nKUgA/4/

answered Mar 18 '13 at 15:22

Reinstate Monica Cellio

25,975
6
51
67

1

Nice. Probably a better fix than mine. – isherwood Mar 18 '13 at 15:23
@isherwood Something I wasn't aware of till now, tbh. – Reinstate Monica Cellio Mar 18 '13 at 15:23
Works perfectly. Thank you very much. Could you kindly explain why making it a `block` element is necessary? Are divs inherently `block` elements while tables have to be specified? – temporary_user_name Mar 18 '13 at 15:32
1

Tables are inline and divs are block - yes. As to why that's an issue with slideToggle I honestly don't know. It was just the first thing I thought of when I saw your problem. You could also try putting the table in a div and see if that still works, but there's obviously no real need now ;) – Reinstate Monica Cellio Mar 18 '13 at 15:44

score 4 · Answer 2 · answered Mar 18 '13 at 15:03

4

Try sliding a div rather than the table:

http://jsfiddle.net/nKUgA/3/

<div id="pictureControls" onclick="" title="Picture Controls" alt="Picture Controls">
    <div id="pictureControlsWrapper">
        <table id="pictureControlsMenu">

Since I wasn't sure what the HTML click function and the other thing were doing, I removed them along with the stopPropogation statement.

answered Mar 18 '13 at 15:03

isherwood

58,414
16
114
157

I seem to recall reading quite some time ago that tables didn't react nicely to being resized... I'm betting that's why wrapping the table in a div works, rather than trying to perform the slideToggle() directly on the table itself. – Jason M. Batchelor Mar 18 '13 at 15:11
What's strange is that the jQuery team lists this bug as being "fixed" - http://bugs.jquery.com/ticket/2185 ... it originates from issues with non block-level elements. – Jason M. Batchelor Mar 18 '13 at 15:20
A keen suggestion and I think you're right about the table somehow but the animation movement from this code for some reason is still a bit glitchy-- Archer's method yields the perfect slide. – temporary_user_name Mar 18 '13 at 15:28

jQuery slidetoggle not working?

2 Answers2