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?

the main problem in your code is "YOU ARE NOT SUPPOSED TO USE JQUERY IN ONLOAD SECTION" — Adarsh Mohan, Nov 21 '15 at 15:04
then how to do this would help me Adarsh , if i don't use onload fuction the code will not work — Suhail Invento, Nov 21 '15 at 15:06
try on the normay way as $(document).ready(function(){navigation();}); — Adarsh Mohan, Nov 21 '15 at 15:08

score 1 · Answer 1 · answered Nov 21 '15 at 15:39

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>

Nenad Vracar · Accepted Answer · 2015-11-21T16:20:50.217

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

How to change content of css using jQuery toggle

2 Answers2