Change Icons on toggle in my navigation bar

Question

I'm trying for about 2 hours now to get something so simple done but there seems to be something in the way that blocks my function from working, I don't understand what causing the function not to work and how can I get it to show the icons change on a click.

any help would be much appreciated, please see the link below, resize your browser a bit so you will see the menu toggle.

I am trying to change the div class to menu-close and not menu-toggle on click so there will be a different icon.

here is the link to see it on the website: http://didyouknowfacts.org/animals/

here is my html + javascript:

    <nav id="site-navigation" class="main-navigation" role="navigation">
        <div class="col-width">

              <script>
              $(function() {
              $( "#openclose" ).click(function(){
                  $( ".menu-toggle" ).switchClass( "menu-toggle", "menu-close", 1000 );
                  $( ".menu-close" ).switchClass( "menu-close", "menu-toggle", 1000 );
              });
              });
              </script>
            <div id="openclose" class="menu-toggle"><?php _e( 'Menu', 'theme-name' ); ?></div>
            <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'theme-name' ); ?></a>
            </div>

            <?php wp_nav_menu( array('theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
        </div>
    </nav><!-- #site-navigation -->

here is the css:

.menu-toggle {
  cursor: pointer;
  font-size: 0;
  margin: 0;
  overflow: hidden;
  position: absolute;
  top: 17px;
  right: 10px;
  text-align: center;
}

.menu-toggle:before {
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font: normal 30px/1 FontAwesome;
  text-decoration: inherit;
  vertical-align: text-bottom;
  color: #fff;
  content: "\f0c9";
  margin: 0;
}

.menu-close {
  cursor: pointer;
  font-size: 0;
  margin: 0;
  overflow: hidden;
  position: absolute;
  top: 17px;
  right: 10px;
  text-align: center;
}

.menu-close:before {
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font: normal 30px/1 FontAwesome;
  text-decoration: inherit;
  vertical-align: text-bottom;
  color: #fff;
  content: "\f00d";
  margin: 0;
}

Answer 1

What I bet is happening is that when you frist write this

$( ".menu-toggle" ).switchClass( "menu-toggle", "menu-close", 1000 );

all .menu-toggle objects "switch" into menu-close objects, meaning you only have a bunch of .menu-close objects in your dom. And when you later then write this:

$( ".menu-close" ).switchClass( "menu-close", "menu-toggle", 1000 );

all you .menu-close objects turn into .menu-toggle , meaning all your objects are now .menu-close .

Therefore we just change your click function to inluce a pointer to the currently clicked menu item.

$( "#openclose" ).click(function(){ //If this is not a unique name then it should by the way be a class, not an id.
    $( ".menu-toggle" ).switchClass( "menu-toggle", "menu-close", 1000 );
    $( this ).switchClass( "menu-close", "menu-toggle", 1000 })
})

Answer 2

If I go to your web page, I see the error "Uncaught ReferenceError: $ is not defined". jquery is defined below your script, so $(function() ... does not get executed at all.

Answer 3

Try using the addClass() and removeClass(). If you want to toggle it, you can use if else statements.

 $(document).ready(function(){ $("button").click(function(){ $('.blue').addClass('orange'); $('.orange').removeClass('blue'); $('div').animate({borderRadius: "100px"}) }); }); 

 .blue{ height: 150px; width: 150px; border-radius: 5px; border: 1px solid black; background-color: royalblue; } .orange{ background-color: orange; height: 150px; width: 150px; border-radius: 5px; border: 1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='blue'></div> <button> Change Color</button>