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 do you mimic multi row horizontal scroll table behavior with CSS and Divs?

    How to force space inbetween a css table (responsive webpage)

    How to design HTML header

    How to make elements appear under a
      in Firefox & IE8?

    How to set a style one a parent element [duplicate]

    How to disable and re-enable tabindex of hidden/visible elements?

    jQuery: How do I target the clicked element when they all share the same CSS class?

    CSS Syntax - How to interpret this?

    css: How to change row color of a table after its been selected and clicked away

    How to call particular CSS file only for desktop not for mobile [closed]

    How to fluid images when resize window?

    How to change border of div containing radio button when checked

    How to edit the correct phone number in my script?

    How to keep responsiveness while expanding div background height in CSS?

    Why is Nexus 4 (using Chrome for Android) showing window size as 384x519 but screenshot shows 768x1038?

    How to fit the content of the site in any resolution CSS

    Always have my Image show in X percentage using CSS?

    CSS, how to add picture in the corner of every columns

    How do I remove a CSS class from a jqGrid cell?

    How to restrict the contents in a table data() of a table to a certain limit?

    how to recreate tex's over- underbracket using css

    CSS: How to create a lines or dots over a background image? [closed]

    How to correctly affect multiple css properties in jquery

    how to make menu on mouse hover in CSS

    How can i find and change css style in ruby?

    How to force text wrapping with floated elements

    Stack row 2x2 on Bootstrap using rows in same height… how?

    Issue with changing how containers look based on values in an MD array

    How can I have % of width of an img wrapped in a specific div width?

    ASP.Net MVC: How to use razor variable in CSS file