[Solved] Issue with jQuery slideToggle 'display: none'

[Rugg]

Hello everyone,

I’m using jquery slideToggle to show and hide a div on mobile devices. I’m using display: none inside a media query for devices below 768px. This allows the div to start closed for the slideToggle function. I’m experiencing an issue though…

Below is a sample of the code. Notice that both the Nav and Content divs are visible. If you resize the browser to be smaller than the 768px breakpoint, the Nav div disappears and you’re prompted with a Button to toggle it’s visibility. So far, this is the intended output. After toggling the Nav div, resize the browser back to the original state (larger than 768px). At this point, you will notice the Nav div remains hidden and does not return to display:block. Only after refreshing the browser will the Nav div re-appear.

Could someone please suggest a method for solving this? Or is there an approach that works without using display:none?

Example:

http://jsfiddle.net/pak6a/28/embedded/result/

Any help is appreciated. Thank you.

[Podders]

The problem with jQuery’s Toggle is indeed as you pointed out that it add’s an inline style to the element which does not get removed untill the toggle is triggered again,

Try adding the display none/block as an extra class in the media query, then toggle that class with your button instead,

http://codepen.io/Podders/pen/uaBfA

[Podders]

@Rugg The sliding animation can be achieved with CSS3 transitions, it’s actually better to do any animation for small screens using CSS3, Paul Irish did a fantastic explanation to why over at his blog,

http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

Adding the callback for toggleClass would do nothing because the existing slideToggle function was still in place, so the same inline styles to perform the animation then hide the nav are still there,

I forked your fiddle to add CSS3 transitions

http://jsfiddle.net/2HSU2/1/embedded/result/

[Podders]

Hi @Rugg,

I’m not quite sure I understand your question, the transition seems to fire as soon as I hit the breakpoint in Chrome and Firefox, are you seeing a different effect?, what browser are you using to test this with?

[Podders]

Hi @Rugg,

I don’t get that effect in Safari for windows, however, you can create the effect your looking for by adding the transitions inside the media query too, you will need to add a event handler to the window resize event to remove the used classes once the window width is larger than the media query width though,

An updated fiddle is here

http://jsfiddle.net/2HSU2/7/embedded/result/

[rtkarpeles]

Thank you @Podders! Such helpful code! Blessings!

Ryan

[[email protected]]

One solution that appears to work is to make your CSS rule !important. That will trump the inline style added by jQuery slide toggle. (I think ;-)

[PelleLV]

I know this is an old thread, but I had the same exact problem and I couldn’t use CSS3 transitions – the div didn’t have a fixed height.
I used a min-width media query – in your case min-width: 769px – and set ‘display:block !important’ to the div. Worked perfectly.

[perludum]

Thank you guys for this nice piece of code, it’s still fresh.
I made a little update adding a few features:

• The accordion now works with variable content heights by using max-height.
• Opening an accordion section automatically closes the other ones.
• Window scrolls to the top of the opened accordion section by using anchors (might be useful on mobile devices).

Here’s the new jsfiddle, based on Podders:

http://jsfiddle.net/perludum/y48ypLLu/

[Author]

Posts