JSFiddle - React, Tailwind, and code Playground

by jim ulle

HTML

<a class="navbar-toggle">toggle</a>

<div class="navbar navbar-collapse">i'm the navbar</div>

<p class="content-below">content below...</p>

CSS

.navbar-toggle {  }
.navbar { display: none; height: 200px; background: blue; color: white; }
.navbar-collapse {  }
.in {  }
.content-below { background: green; margin: 0; }

JavaScript

$('.navbar-toggle').on("click", function(event) {
    $('.navbar-collapse').toggleClass('in');

  if ($(".navbar-collapse").hasClass('in')) {
      $('.navbar-collapse').slideToggle();
      $('.content-below').animate({'margin-top':'200px'});
  }
  else {
      $('.navbar-collapse').slideToggle();
      $('.content-below').animate({'margin-top':'0px'});
  }

});