CODEWITHSUNDEEP
javascriptjqueryhtml
Gurbii
Gurbii

Reputation: 255

jquery toggle between 2 multiple classes

I'm trying to toggle between 2 multiple classes in jquery. I want it to change on click from an own icon to a font-awesome icon. It works with only one class to change however when i want it to change multiple classes i can't get it to work.

jQuery(document).ready(function () {
var $menu = 'icon '+'icon-menu';
var $close = 'fa '+'fa-close';

$('.icon-toggle-menu').click(function (evt) {
    $('.nav-screen').fadeToggle();
    $($menu, $close).toggleClass($menu +' '+ $close);
    $('.nav-logo-black').fadeToggle();
    $('.nav-icons').toggleClass('nav-fixed');
    $('.nav').toggleClass('nav-padding');
})
});
<nav class="nav">
    <a class="nav-logo-black" href="index.html">
        <img src="assets/img/logo/forcitx2.png" alt="forcit-logo-banner">
    </a>
    <ul class="pull-right nav-icons">
        <li><a class="icon-chat" href="#"><span class="icon icon-message"></span></a></li>
        <li><a class="icon-toggle-menu" href="#"><span class="icon icon-menu"></span></a></li>
    </ul>
</nav>

Upvotes: 2

Views: 65

Answers (1)

Arg0n
Arg0n

Reputation: 8423

Okay, I'm going to do an attempt at fixing your code. Even though it's not fully clear what you're aiming for:

$(function() {
  $('.icon-toggle-menu').click(function(evt) {
    //$('.nav-screen').fadeToggle(); Missing in HTML
    $('.icon.icon-menu, .fa.fa-close').toggleClass('icon icon-menu fa fa-close');
    $('.nav-logo-black').fadeToggle();
    $('.nav-icons').toggleClass('nav-fixed');
    $('.nav').toggleClass('nav-padding');
  })
});
.icon {
  font-weight: bold;
}

.fa.fa-close {
  color: red;
}

.icon.icon-menu {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
    <a class="nav-logo-black" href="index.html">
        Logo
    </a>
    <ul class="pull-right nav-icons">
        <li><a class="icon-chat" href="#"><span class="icon icon-message">Icon chat</span></a></li>
        <li><a class="icon-toggle-menu" href="#"><span class="icon icon-menu">Icon toggle menu (click me)</span></a></li>
    </ul>
</nav>

Upvotes: 3

Related Questions