Vue JS toggle html div class on a button click not working

Question

I am currently learning Vue.js for a project I am busy with. I have been learning through online resources, as well as a Udemy course by Maximilian Schwarzmüller, Which i'd highly recommend.

I am having an issue building a hamburger menu for practice purposes. I am adding/removing a class on a div which holds my menu content. The adding/removing of the class happens via a button click (my "hamburger").

As far as I can tell through my course and other online sources, including a good few StackOverflow questions, what I have done should work.

Please let me know if you can see any issues, as it isn't working in my codepen. Thanks in advance =)

relevant HTML:

<button v-on:click="isActive = !isActive" class="navigation-hamburger">
  <p>-<br>-<br>-</p>
</button>

<div class="menu-contain" v-bind:class="{ active: isActive}">
 <ul>
  <li><a href="#" class="links">Home</a></li>
  <li><a href="#" class="links">About</a></li>
  <li><a href="#" class="links">Contact</a></li>
 </ul>
</div>

CSS:

.menu-contain {
  width: 100%;
  height: 0px;
  background-color: #09333C;
  transition: all 0.5s linear;
}

.active {
  width: 100%;
  height: 300px;
  background-color: #8BAFB5;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s linear;
}

Vue js:

new Vue({
  el: '#wrap',
  data: {
    isActive: false
  }
});

Here is the codepen:

https://codepen.io/-Infamous/pen/KvXNJB

You have an erroneous closing </div> tag that is closing the #wrap div too early meaning your .menu-contain div is outside the scope of your Vue instance. Here's a working codepen: codepen.io/anon/pen/PKJKRM — thanksd
– thanksd, Commented Aug 14, 2017 at 13:37

Tyler Kirby · Accepted Answer · 2017-08-14 13:42:07Z

1

Check your markup, a couple of closing tags were out of order.

<div id="wrap">
  <header id="navigation-top">
    <nav class="main-navigation">
      <!-- this is the button that toggles the class "active" -->
      <button v-on:click="isActive = !isActive" class="navigation-hamburger">
        <p>-<br>-<br>-</p>
      </button>
    </nav>
  </header>

  <!-- this is the div that needs to get the class "active" when the button is clicked -->
  <div class="menu-contain" v-bind:class="{ active: isActive}">
    <ul>
      <li><a href="#" class="links">Home</a></li>
      <li><a href="#" class="links">About</a></li>
      <li><a href="#" class="links">Contact</a></li>
    </ul>
  </div>
</div>

answered Aug 14, 2017 at 13:42

Tyler Kirby

2631 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Infamous Over a year ago

Ah, that worked, silly mistake on my behalf -_- Thank you very much! =)

Collectives™ on Stack Overflow

Vue JS toggle html div class on a button click not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related