JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootswatch/3.0.0/journal/bootstrap.min.css">
<!-- navbar -->
<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="glyphicon glyphicon-align-justify"></span> 
            </button>
            <button id="search-button" type="button" class="navbar-toggle" data-toggle="button" data-target="#search"> <span class="glyphicon glyphicon-search"></span>

            </button> <a class="navbar-brand" href="/"><b>Brand</b></a>

        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#about">About</a>

                </li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
</div>

<!-- search form row -->
<div class="container" style="padding-top:80px">
    <div id="search" class="row hidden-xs">
        <p class="well">This is where the complex search form goes</p>
    </div>
</div>

JavaScript

$("#search-button").click(function(){
    // $("#search").fadeToggle(); // doesn't work
    $("#search").removeClass('hidden-xs'); // works, but no toggle or fade effect
    console.info('toggled');
});