CODEWITHSUNDEEP
jquerycss
Jstrong
Jstrong

Reputation: 9

jquery toggleClass no change in view

I'm trying to use jquery to create a mobile navigation menu. I have the script in there and it's toggling the classes but nothing happens.

I've had this working on another site and have this set up the same but doesn't work here.

I've tried looking on youtube and on Overstack. I've looked at several other posts with similar questions and have tried a few things but haven't gotten anything to work.

$('.handle').on('click', function() {
  $('.navsmall').toggleClass('.showing');
});
.handle {
  width: 100%;
  padding: 8px;
  background-color: #222;
  text-transform: uppercase;
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
  padding-left: 40%;
  cursor: pointer;
}

.handle a:hover {
  color: #5069ec;
  text-shadow: 1px 1px 1px #111;
}

.handle::after {
  position: relative;
  content: '\2630';
  padding-right: 5px;
}

.navsmall_container {
  width: 100%;
  display: none;
}

.navsmall {
  overflow: hidden;
  /* display: none; */
  width: 100%;
  box-sizing: border-box;
  list-style: none;
  text-align: center;
  font-family: sans-serif;
  text-align: right;
  margin: 0;
  padding: 0 15px 0 0;
  -webkit-transition: max-height 1s;
  -ms-transition: max-height 1s;
  -moz-transition: max-height 1s;
  -o-transition: max-height 1s;
  transition: max-height 1s;
}

.navsmall li {
  cursor: pointer;
  line-height: 1.5em;
}

.navsmall li:hover {
  background-color: #bbb;
  color: #5069ec;
  text-shadow: 1px 1px 3px #111;
}

@media screen and (max-width: 667px) {
  .handle {
    display: block;
  }
  .navsmall_container {
    display: block;
  }
  .navsmall {
    max-height: 0;
  }
  .showing {
    display: block;
    max-height: 20em;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="navsmall_container">
  <div class="handle">
    <a href="#">menu</a>
  </div>

  <ul class="navsmall">
    <li>
      <a href="#"></a> home</li>
    <li>
      <a href="#"></a>hook</li>
    <li>
      <a href="#"></a>about</li>
    <li>
      <a href="#"></a>extra</li>
    <li>
      <a href="#"></a>registration</li>
    <li>
      <a href="#"></a>contact</li>
  </ul>
</div>

This should be making the menu show and drop down from the handle. The class for the ul toggles inside the dev view but nothing happens in the actual view.

I also have the test page here. www.uma-clt.com/nav_test.html if more code is needed.

Upvotes: 1

Views: 63

Answers (2)

Rolf
Rolf

Reputation: 53

Remove the dot in .toggleClass, common mistake, happend to me also often ;-)

Example:

$(".handle").on("click", function() {
    $(".navsmall").toggleClass("showing");
});

https://codepen.io/cgpro/pen/zYOPXqB

Upvotes: 4

Jon
Jon

Reputation: 166

Just remove the "." you have in the function toogleClass. This should be the Script: 

$('.handle').on('click', function() {
    $('.navsmall').toggleClass('showing');
  });

Upvotes: 3

Related Questions