How to change content of css using jQuery toggle

Question

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?

Answer 1

maybe this will help you..

 function navigation() { //$('#toggle').hide(); $('#click-me').click(function() { $('#toggle').slideToggle(600); $('#toggle').attr('data-content','pppp'); }); } $(document).ready(function(){navigation();}); 

 #toggle:after { content: attr(data-content); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="click-me">click me</button> <nav id="toggle" data-content="xxxeeeee"> </nav> 

Answer 2

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: "=";
}