Suhail Invento Suhail Invento - 7 months ago 16
Javascript Question

How to change content of css using jQuery toggle

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

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