the toggleClass will not remove the class of 'showing'

I am trying to give my website a basic jquery hamburger menu icon and you can click onto it and it will transform into a cross. Everything works until I want to add a "showing" class to show my menu content. I can get it to show the menu content, but once I want to click the cross back to the hamburger menu bar, it is not working any more. Any suggestions... thanks

$('.menu-icon').click(function() {
  $(this).toggleClass('show');
  $('ul').toggleClass('showing');
})
.hamburger,
.hamburger::before,
.hamburger::after {
  content: '';
  width: 2rem;
  height: 3px;
  background: blue;
  display: block;
  transition: all ease-in-out 350ms;
}

.hamburger::before {
  transform: translateY(-7px);
}

.hamburger::after {
  transform: translateY(4px);
}

.show .hamburger {
  transform: rotate(45deg);
}

.show .hamburger::before {
  display: none;
}

.show .hamburger::after {
  transform: rotate(-90deg);
}

@media screen and (min-width: 300px) {

    .btn--large {
        position: relative;
        top: 20px;
        padding: .6rem 1.8rem;
    }

    .menu-icon {
        display: block;
        width: 30px;
        height: 30px;
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
    }

    ul {
        display: none;
    }

    .showing {
        display: block;
    }

    .btn-origin {
        display: none;
    }

    .header-logo {
        position: absolute;
        width: 70px;
        height: 60px;
        left: 50%;
        transform: translateX(-50%);
    }

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div class='wrapper'>

    <img class='header-logo' src="assets/images/logo.jpg" alt="a logo">

    <a class='btn btn-origin' href="#">Get in touch</a>
    <div class='menu-icon'>
      <div class='hamburger'></div>
    </div>
    <div class='menu-content'>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Location</a></li>
      </ul>
    </div>


  </div>
</header>

1 answer

  • answered 2018-07-11 03:31 Jismon Thomas

    Not sure what is the expected output, but your code seems to be working perfect see below:

    $('.menu-icon').click(function() {
    
    
        $(this).toggleClass('show');
    
        $('ul').toggleClass('showing');
    
    
    })
    .hamburger, .hamburger::before, .hamburger::after {
            content: '';
            width: 2rem;
            height: 3px;
            background: blue;
            display: block;
            transition: all ease-in-out 350ms;
        }
    
        .hamburger::before {
            transform: translateY(-7px);
        }
    
        .hamburger::after {
            transform: translateY(4px);
        }
    
        .show .hamburger {
            transform: rotate(45deg);
        }
    
        .show .hamburger::before {
            display: none;
        }
    
        .show .hamburger::after {
            transform: rotate(-90deg);
        }
    
    
    
    
    @media screen and (min-width: 300px) {
    
        .btn--large {
            position: relative;
            top: 20px;
            padding: .6rem 1.8rem;
        }
    
        .menu-icon {
            display: block;
            width: 30px;
            height: 30px;
            position: absolute;
            top: 20px;
            right: 20px;
            cursor: pointer;
        }
    
        ul {
            display: none;
        }
    
        .showing {
            display: block;
        }
    
        .btn-origin {
            display: none;
        }
    
        .header-logo {
            position: absolute;
            width: 70px;
            height: 60px;
            left: 50%;
            transform: translateX(-50%);
        }
    
    }
    /
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
    <a class='btn btn-origin' href="#">Get in touch</a>
                    <div class='menu-icon'>
                        <div class='hamburger'></div>
                    </div>
                    <div class='menu-content'>
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Contact</a></li>
                            <li><a href="#">Location</a></li>
                        </ul>
                    </div>