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 to center an image over another image in CSS

    How to Include marker in SVG Blinking Rectangular or circle Border image in google maps

    How to solve divs overlapping issue and maintain css fluid layout?

    How to change the css style with a html inline link

    how to use jquery to add css based on screen width

    How do i add and remove an active class with jQuery?

    How to edit the correct phone number in my script?

    css how to center this content

    Weird CSS effect with box shadows - how to solve?

    How to adjust toaster popup width

    Autohide Scrollbars - Show only when necessary

    how to make background 100% on a top menu

    CSS - How to centre a link button

    Angular: How to alternate CSS classes for a list, with more than 2 classes?

    CSS selector hierarchy? How to reverse engineer to get the styling?

    How to make the css affect the new content loaded by jquery?

    How to position SVG with CSS?

    How to include CSS code directly in a php file

    how to avoid firefox to add overlay color on image click?

    Hover on div(1) to show div(2), if mouseout continue to show div(2) for x seconds

    SCSS/SASS how apply style for all pseudo selectors

    Why my asp.net page is not showing styles I set

    How to set the specific prefix for file-loader in webpack?

    How to create a sticky footer in CSS inside an absolutely positioned div?

    How to keep a sticky menu contained inside a floating sidebar?

    How to distribute p:menuitems in p:menubar accordingly?

    How to target flex item by its order number?

    how to desaturate background image of a div using css?

    How do I set the offset of a div from the top of an outer div to be the same as the offset from the side of the outer div using only css?

    How do I specify another width for newly added divs in javascript