How to reset inline css applied by jquery?


Tags: javascript,jquery,html,css,dom

Problem :

I've updated my self-made responsive menu but I have a problem with the menu disappearing when resizing.

When I downsize my window below 1100px width and open the responsive menu, everything is fine. However when I close the responsive menu Jquery applies a display: none inline attribute.

This makes my screen disappear when I resize back to full width.

I need some way to override or remove the inline css with everything working properly. Can anybody suggest how to fix this?

Codepen example

<script>
    $(document).ready(function() {
        $('.button-open').click(function() {
            $('.navigational-menu').slideToggle('test');
            $(this).toggleClass('button-close');
        });
    });
</script>


Solution :

If you have no other inline css property try the updated Pen

http://codepen.io/valentinpalkovic/pen/rVOVjR

<script>
    ....
    $('.navigational-menu').slideToggle('test', function() {
        if($('.navigational-menu').css("display") == "none"){
            $('.navigational-menu').removeAttr("style");
        }
    });
    ....
</script>

    CSS Howto..

    How can I prevent this div in my table from increasing the cell height?

    How to create a speech bubble in css?

    How to word wrap text in HTML?

    CSS: How to get thumbnails into a horizontal line?

    How to overide CSS for width?

    How to use a text file's contents in HTML as text [duplicate]

    How do I properly add a scrollbar to a jQuery Mobile popup using iScrollview?

    How can I apply styles to a label whose checkbox is checked using only CSS?

    How to reduce the length of the paragraph by dots(…)?

    How do I stop a CSS layout from distorting when zooming in/out?

    How to draw grid around irregularly arranged web elements?

    How to create a top-footer and footer using foundation, just like foundation website

    How to place elements on top of each other

    How do I get Aptana Plugin for Eclipse to validate against CSS3, rather than CSS2?

    How do I achieve a fully working image scrolling effect like in this example?

    CSS/HTML - How do I get text to go behind an image inside a div

    How to output compiled CSS files to a different production folder using grunt and grunt-contrib-less

    How can I center just one element within a container?

    How to I make the width of my CSS wrapper relative to the size of the monitor?

    How to make my CSS responsive

    How to extend a wrapped element background both left and right with different color?

    How to use Bootstrap 3 gradient for background in CSS? [closed]

    How do I get a fixed positioned footer, fixed width right column, left column for the rest using CSS lay-out?

    How to remove space above the
    tag?

    How to make a new class

    how to load the dynamically changed css file

    How to make the textbox above the slider

    How do I format tabs in Blueprint CSS?

    How to vertically center dynamically 1 or 2 lines of text with CSS? [duplicate]

    How to put div block into right screen area using css?