Css function doesn't work

Question

I am writing this code, first toggle function is working but second toggle isn't. Why is that?

<script type="text/javascript">
    $(document).ready(function(){
        $( ".navicon" ).click(function() {
            $( "#menu" ).slideToggle( "medium", function() {
            // Animation complete.
            });
        });
    });
    $(document).ready(function(){
        $('.navicon').toggle(function () {
            $("body").css({"overflow": "hidden !important"});
            $("#mobile_menu").css({"width": "100% !important"});
        });
    });
</script>

Answer 1

The toggle() method was deprecated, you need to use an alternative, such as a flag to depict the 'toggled' state.

A loose example:

$('.myclass').click(function() {
if ($(this).hasClass('toggle')) {
doThis;
$(this).removeClass('toggle');
} else {
doThis;
$(this).addClass('toggle');
}
});

And encase all of your functions with $(document).ready() rather than doing it for each individual one.