Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
  
  
<div id="wrap">
  <header id="navigation-top">
    <nav class="main-navigation"  v-on:click.prevent>
      <!-- this is the button that toggles the class "active" -->
      <button v-on:click="makeActive('container')" class="navigation-hamburger" v-bind:class="{'active' : isActive}">
        +
      </button>
      
      <button  v-on:click="makeActive('container-fluid')" class="navigation-hamburger" v-bind:class="{'active' : !isActive}">
        -
      </button>
    </nav>
  </header>
​
  <!-- this is the div that needs to get the class "active" when the button is clicked -->
  <div v-bind:class="active">
    <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>
  
</body>
</html>
 
.container {
  border: 2px solid lime;
}
​
.container-fluid {
  border: 2px solid red;
}
​
button.active {
  background: #000;
  color: #fff;
}
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
lime7pro
0viewers