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 to apply SVG filter to an element?

    how to apply css class condtionally in angularjs

    How to get these timestamps, which come after in the html, to float right on the same line

    how to apply css to a particular asp.net table?

    How can I make it so that CSS uses a class only if another is not present on an element?

    How to make a grid layout with unknown number of columns and each column has equal size? [closed]

    in slick slideshow, just want center slide to be active

    How would I go about having placeholder divs that are then “overwritten” later with PHP?

    How to use metro ui css sidebar and compact classes

    how to make div with image like below in html and css

    I can't figure out how to get display property to work when it comes to multiple div elements

    How to use CSS Rotate() in TH Table Tags

    Align lists on showing or hiding

    How do you force a website to be in landscape mode when viewed on a mobile device?

    How to fill the space of removed
    by left or right positioned
    ?

    Using CSS to show/hide content. How do I make hide the default

    How to persist checking the screen width in Javascript

    How to preload predefined images in Java-Script / jQuery?

    How can I align to center floated divs?

    How do I adjust the height of the pikaChoose plugin without ruining the width?

    How to set background image to keep its position while browser width is changing?

    How to have choices that change the background of a site

    How to achieve a two column centered layout, with the main column expandable on wider screens?

    ASP.NET DataBoundField DataFormatString, how can I add html correctly?

    How to enable -webkit-animation/transition-property for :before and :after pseudo elements?

    How to adjust CSS settings for jquery.simply-scroll plugin to occupy full screen

    How to blur only background and not content in Ionic/CSS

    CSS: How to place next to each other 2 images with 50 % width?

    How to add CSS Hack specifically for IE10?

    How to add dynamic CSS style sheet for single xhtml file