title: Bootstrap 4 navbar toggle button not working correctly
body: <p>I have html code working with bootstrap 4. In my case when navbar toggle button clicked the navbar open and hidden automatically. How to manually open and hidden navbar when clicked? Thanks anyone.</p>
  
  <pre><code>&lt;title&gt;SuperEvent&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/bootstrap.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/script.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>&lt;div class="header"&gt;
    &lt;div class="container"&gt;   
      &lt;div class="row"&gt;
        &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt;
          &lt;img src="img/iklan.JPG" class="iklan float-right"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cleafix"&gt;&lt;/div&gt;
      &lt;nav class="navbar navbar-expand-lg " id="nav" &gt;
      &lt;a class="navbar-brand" href="#"&gt;Super Event&lt;/a&gt;
      &lt;button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
          &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
          &lt;ul class="navbar-nav mr-auto"&gt;
            &lt;li class="nav-item active"&gt;
              &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="#"&gt;About&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="#"&gt;Services&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="#"&gt;Portfolio&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="#"&gt;Contact Us&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>