Slide effect on divs for a mobile-friendly website

[Alexander Supertramp]

Hi everyone,I’m trying to create a touch screen device version of my website.I managed to code something interesting here. It is not perfect because the content that appears partially overlaps the buttons and I use fixed height and width but at least it works.Each button makes a div slide from the top of the screen down to the bottom. If I click on the same button, the div slides back to the top. If I click on the other button, the div that slides down pushes the other div down.When I include this code in my website using media queries, nothing works, even if I only use this code not in my website but in blank files. I only tested on iPhone 4 and 4S and enven on my computer without using media queries. The only effect I get is the menu to appear suddenly as if the display css property has been changed from none to block without any transition when I click on the first button. Nothing happens if I click again on the button: the menu is stuck on the screen. The second button doesn’t work at all, it doesn’t show or hide anything.I don’t understand, it works quite well on Jsfiddle. I tried to use slideToggle() instead, or to simplify the script without using the if statement and its content. I failed!Any idea to fix this?Thanks

[justsomeguy]

It looks like you can connect an iPhone to a computer and debug it that way, it would be fairly difficult to try and guess what the problem is versus looking for error messages.http://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/

[Alexander Supertramp]

Hi!

Finally, I’ve found the solution after almost 2 weeks.

There is actually a toggle() method in jQuery but there is also an enhanced version in jQuery UI that provides more easing functions than just swing and linear.

I only found one website that talk about that difference: here.