JSFiddle - React, Tailwind, and code Playground
by GMK Hussain
HTML
<h2>Slide up and Down section on click </h2>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<header>
<section class="top">
<div class="container">
<strong>Special Offer</strong> - 30% Off All Wireless Charging Accessories!</div>
</section> <section class="hdr">
<div class="container">
<nav class="navbar navbar-default -nav" role="navigation" id="slide-nav">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"><img src="/yii/airenergy/themes/front/images/logo.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="slidemenu">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="KNav1"><a href="/yii/airenergy">Home</a></li>
<li class="KNav2"><a href="/yii/airenergy/products">PRODUCT</a></li>
<li class="KNav3"><a href="/yii/airenergy/room">ROOM</a></li>
<li class="KNav4"><a href="/yii/airenergy/page/support">SUPPORT</a></li>
<li class="KNav5"><a href="/yii/airenergy/page/contact">CONTACT</a></li><li...
JavaScript
//Slide up and Down section on click
jQuery(".navbar-brand").click(function(){
jQuery("#home_slider").slideToggle();
});