<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-collapse collapse" id="navbar-filter"> <form class="navbar-form" role="search"> <div class="form-group"> <select name="filter_type" id="filter_type" class="form-control"> <option value="">Order Items By:</option> <option value="date">Creation Date</option> <option value="popularity">Popularity</option> <option value="like_count">Total Likes</option> <option value="comment_count">Total Comments</option> </select> </div> <span id="filter-date"> <div class="form-group"> <!-- add datepicker --> <input type="text" class="form-control" name="start_date" placeholder="Start Date" style="width:100px"> </div> <div class="form-group"> <!-- add datepicker --> <input type="text" class="form-control" name="end_date" placeholder="End Date" style="width:100px"> </div> <div class="form-group"> <select name="popularity" class="form-control"> <option value="DESC">Newest items first</option> <option value="ASC">Oldest items first</option> </select> </div> </span> <span class="hidden" id="filter-popularity"> <div class="form-group"> <select name="popularity" class="form-control"> <option value="DESC">Most popular first</option> <option value="ASC">Least popular first</option> </select> </div> </span> <span class="hidden" id="filter-like_count"> <div class="form-group"> <select name="likes" class="form-control"> <option value="DESC">Most likes first</option> <option value="ASC">Least likes first</option> </select> </div> </span> <span class="hidden" id="filter-comment_count"> <div class="form-group"> <select name="comments" class="form-control"> <option value="DESC">Most comments first</option> <option value="ASC">Least comments first</option> </select> </div> </span> <button type="submit" id="btn-filter-pending" class="btn btn-default">Update</button> </form> </div> </div> </div>