How to change content of css using jQuery toggle


Tags: javascript,jquery,html,css

Problem :

I have a navicon made of css content property.

The code looks like this

#nav:before {
    content: '=';
}
function navigation() {
    $('#navigation').click(function() {
        $('#toggle').slideToggle(600);
        $('#toggle').css({ 
            'content': 'x'
        }); 
    });
}
window.onload = navigation;

<nav id="toggle">
<ul>
<li></li>
</ul>
</nav

This is not working. How can I call default property when the user clicks the x mark?



Solution :

You can try something like this https://jsfiddle.net/2Lzo9vfc/149/

HTML

<button>BUTTON</button>
<div class="nav pseudo"></div>

JS

$('button').click(function() {

    $('.nav').slideUp(function() {
        var nav = $(this);
        if(nav.hasClass('pseudo')) {
            nav.removeClass('pseudo');
            nav.addClass('active');
        } else {
            nav.removeClass('active');
            nav.addClass('pseudo');
        }
    }).slideDown();

});

CSS

.nav {
    padding: 5px;
    border: 1px solid black;
    display: inline-block;
}

.active:before {
    content: "x";
}

.pseudo:before {
    content: "=";
}

    CSS Howto..

    How to set up fields position?

    Bootstrap progress bar with gradient color showing proportionally on active width

    How to combine two css3 gradients ?

    CSS Have a div which can fit 5 li per row how to make 6 go to new line

    How to position multiple elements on one line, if they are in an absolute element?

    how to code different type of border in css?

    How to Style Similar to an Exam Questi-n

    how to access image through div

    CSS - How to make a relative element follow me up and down but not left and right?

    How to download CSS file through JQuery

    How do you load the css for a Mediawiki tag extension?

    How to set min-height of div to height of viewport?

    How to center multiple div elements within a parent div?

    How to use an image more than one place in CSS

    How to run PHP through Adobe Muse generated CSS

    Transition on div height change caused by its inner element showing or hiding

    How to see the style of the thumb of range input in Chrome developer tools?

    How to make a different flip animation using CSS?

    How can i get my slideshow to stop changing size?

    In javascript, how to get a class name from a td cell?

    HTML/CSS Making a textbox with text that is grayed out, and disappears when I click to enter info, how?

    How to get a CSS animation to run through the correct steps

    How can I create CSS sprites from images stored in the database?

    how to fix the button so that they don't scroll with contents

    Show overlay fullscreen div then hide it by clicking on it

    How do I position a Silverlight Control

    How to find everything that is not matching a regular expression

    How to edit a pseudo element on focus using css or jQuery

    How can I do html multi elements list with type attribute?

    how to apply css on dynamic loaded html content (jquery mobile+backbone+phonegap)