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
– Adarsh Mohan, Commented Nov 21, 2015 at 15:04
try on the normay way as $(document).ready(function(){navigation();}); — Adarsh Mohan
– Adarsh Mohan, Commented Nov 21, 2015 at 15:08

Nenad Vracar · Accepted Answer · 2015-11-21 16:20:50Z

1

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

edited Nov 21, 2015 at 16:20

answered Nov 21, 2015 at 15:52

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adarsh Mohan · Accepted Answer · 2015-11-21 15:39:09Z

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>

answered Nov 21, 2015 at 15:39

Adarsh Mohan

1,3941 gold badge9 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to change content of css using jQuery toggle

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related