Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #43618
    Rugg
    Participant

    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.

    #129469
    Podders
    Participant

    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

    #129493
    Podders
    Participant

    @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/

    #129519
    Podders
    Participant

    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?

    #129577
    Podders
    Participant

    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/

    #141324
    rtkarpeles
    Member

    Thank you @Podders! Such helpful code! Blessings!

    Ryan

    #153959
    [email protected]
    Participant

    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 ;-)

    #193377
    PelleLV
    Participant

    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.

    #235813
    perludum
    Participant

    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/

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.