CODEWITHSUNDEEP
jquerycsshtmlfont-awesome
nCore
nCore

Reputation: 2087

change font-awesome icon when toggled

I've been trying to find a way to change this icon to fa-times when my menu is toggled then change back to fa-bars when the menu is toggled back/close.

I've tried some codes already they're in this jsfiddle. http://jsfiddle.net/3RBQ4/39/

<nav class="primary_nav">
    <label for="show-menu" class="label-show-menu"><i class="fa fa-bars fa-2x"></i></label>
    <input type="checkbox" id="show-menu" role="button">
    <ul id="menu">
        <li><a href="index">Home</a></li>
        <li><a href="about">About</a></li>
        <li>
            <a href="services">Services</a>
            <!-- <ul>
                <li><a href="">Building</a></li>
                <li><a href="">Plumbing</a></li>
                <li><a href="">Electrician</a></li>
                <li><a href="">Roofing</a></li>
                </ul> -->
        </li>
        <li><a href="gallery">Gallery</a></li>
        <li><a href="contact">Contact Us</a></li>
        <li><a href="quote"><span class="get-quote">Get a Quote!</span></a></li>
    </ul>
</nav>

CSS:

 input[type=checkbox]{
    display:none;
}
.label-show-menu {
    display: none;
}
#menu {
    outline: 1px solid red;
    overflow:hidden;
    height: auto;
    max-height: 0;
    transition: max-height 0.5s ease-in-out;
}

#menu.expanded {
    background: red;
    max-height: 500px;
}

@media  (max-width:632px){
    .label-show-menu {
        display: block;
    }
}

JS

$('#show-menu').bind('click', function(e) {
    $('.label-show-menu').removeClass('fa fa-bars').addClass('fa fa-times')
    $('#menu').toggleClass('expanded');
 });

Upvotes: 3

Views: 7882

Answers (3)

qczy
qczy

Reputation: 1

I use double toggleClass for <i> element

$('#show-menu').bind('click', function(e) {
    $('#menu').toggleClass('expanded');
    $('.label-show-menu i').toggleClass( 'fa-times');
    $('.label-show-menu i').toggleClass( 'fa-bars');
 });

http://jsfiddle.net/230d7stx/

Upvotes: 0

royhowie
royhowie

Reputation: 11171

Another way to do this would be to use a hidden checkbox. A label is then used to target the checkbox. Since checkboxes receive the :checked pseudo class, when toggled, you can use this to style sibling elements. Let's walk through it.

Here's the HTML, for reference:

<div id="content">
    <input type="checkbox" id="toggle">
    <label for="toggle">
        <i id="bars" class="fa fa-bars fa-fw"></i>
        <i id="cross" class="fa fa-times fa-fw"></i>
    </label>
    <div id="menu">
        <ul>
            <li>item one</li>
            <li>item one</li>
            <li>item one</li>
            <li>item one</li>
        </ul>
    </div>
</div>

The first thing we want to do is hide that ugly checkbox! No one wants to see it.

#toggle {
    display: none;
    position: absolute;
    top: -100%;
    left: -100%;
    cursor: pointer;
}

But how can we toggle the checkbox, if it's hidden? Easy. Use a label:

#toggle + label {
    display: inline-block;
    background-color: white;
}

Now it's just a matter of using the :checked pseudo class properly.

/* by default, the menu should be hidden */
#menu {
    height: 0px;
    display: block;
    /* removed other styling */
}
/* when the checkbox is checked, hide the bars icon */
#toggle:checked + label i#bars{
    display: none;
}
/* and show the cross icon */
#toggle:checked + label i#cross{
    display: block;
}
/* and, of course, give the menu a height */
#toggle:checked ~ #menu {
    height: 85px;
}

And voila! You have a menu that doesn't use any JavaScript. Here's a

fiddle

Upvotes: 3

Josh Crozier
Josh Crozier

Reputation: 240928

For one, you should be targeting the child, i, element. In addition, you should change the class(es) based on whether or not the menu element has the class expanded.

(i.e., $('#menu.expanded').length).

$('#show-menu').on('click', function (e) {
    $('#menu').toggleClass('expanded');
    $('.label-show-menu i').removeClass().addClass(
        $('#menu.expanded').length ? 'fa fa-times fa-2x' : 'fa fa-bars fa-2x'
    );
});

Updated Example

Also, use .on() instead of .bind().

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on() or .delegate(). http://api.jquery.com/bind/

Upvotes: 2

Related Questions