CODEWITHSUNDEEP
jqueryresponsive-design
Gerico
Gerico

Reputation: 5169

Jquery toggle on responsive site

I'm working on a responsive site where I have a menu containing categories. As the viewport shrinks for smaller devices the category box gets hidden and a single button appears that someone can click and using jquery it toggles the category nav. The problem is that if you re-size the screen once you've toggled the nav, it doesn't re-appear properly when you go back to a larger viewport. I'm not sure how to fix this or if there is a better way around it.

I have an example here: http://jsfiddle.net/kZ3kW/

Help appreciated Thanks

Upvotes: 0

Views: 1601

Answers (1)

Roman Mazur
Roman Mazur

Reputation: 512

Problem is that jQuery.slideToggle() toggles inline style 'display' to 'none' or 'block' and it remains there all the time. So when you close menu in mobile view, the inline 'display: none' will remain and it overrides all css properties.

Solution is not to use inline style attribute but instead use the css class. Add callback to your slideToggle() which will remove inline style attribute and add class 'open'. After that add this to your css:

.cat-tbl.open {
    display: block;   
}

and it will work. Check it here.

Upvotes: 3

Related Questions