<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>New Request</legend> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Information</h3> </div> <div class="panel-body"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="txtName">Name</label> <div class="col-md-4"> <input id="txtName" name="txtName" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="txtTitle">Title</label> <div class="col-md-4"> <input id="txtTitle" name="txtTitle" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="selectEndUser">End Use</label> <div class="col-md-4"> <select id="selectEndUser" name="selectEndUser" class="form-control"> <option value="1">Option one</option> <option value="2">Option two</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="selectSegment">Segment</label> <div class="col-md-4"> <select id="selectSegment" name="selectSegment" class="form-control"> <option value="1">Option one</option> <option value="2">Option two</option> </select> </div> </div> <!-- Multiple Checkboxes --> <div class="form-group"> <label class="col-md-4 control-label" for="checkboxesBU">Business Units</label> <div class="col-md-4"> <div class="checkbox"> <label for="checkboxesBU-0"> <input type="checkbox" name="checkboxesBU" id="checkboxesBU-0" value="1"> Option one </label> </div> <div class="checkbox"> <label for="checkboxesBU-1"> <input type="checkbox" name="checkboxesBU" id="checkboxesBU-1" value="2"> Option two </label> </div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label" for="TblApprovers">Approvers</label> <div class="col-md-4"> <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th>Row</th> <th>First Name</th> <th>Last Name</th> <th>Email</th> <th>Biography</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John</td> <td>Carter</td> <td>johncarter@mail.com</td> <td>Lorem ipsum dolor asaaasdssfsssdsdsdssfsaa </td> </tr><tr> <td>1</td> <td>John</td> <td>Carter</td> <td>johncarter@mail.com</td> <td>Lorem ipsum dolor asaaasdssfsssdsdsdssfsaa </td> </tr><tr> <td>1</td> <td>John</td> <td>Carter</td> <td>johncarter@mail.com</td> <td>Lorem ipsum dolor asaaasdssfsssdsdsdssfsaa </td> </tr> <tr> <td>2</td> <td>Peter</td> <td>Parker</td> <td>peterparker@mail.com</td> <td>Vestibulum consectetur sce</td> </tr> <tr> <td>3</td> <td>John</td> <td>Rambo</td> <td>johnrambo@mail.com</td> <td>Integer pulvinar leo id </td> </tr> </tbody> </table> </div> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="txtAuthor">Author</label> <div class="col-md-4"> <input id="txtAuthor" name="txtAuthor" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="txtDueDate">Due Date</label> <div class="col-md-4"> <input id="txtDueDate" name="txtDueDate" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="txtDescription">Description</label> <div class="col-md-4"> <textarea class="form-control" id="txtDescription" name="txtDescription"></textarea> </div> </div> </div> <div class="panel panel-default"> <div class="panel-body"> Documents </div> <!-- File Button --> <div class="form-group"> <label class="col-md-4 control-label" for="fileuploadbutton">Upload files</label> <div class="col-md-4"> <input id="fileuploadbutton" name="fileuploadbutton" class="input-file" type="file"> </div> </div> </div> </div> </fieldset> </form> <div class="col-md-6"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Panel 1</h3> <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span> </div> <div class="panel-body">Panel content</div> </div> </div>

.row{ margin-top:40px; padding: 0 10px; } .clickable{ cursor: pointer; } .panel-heading span { margin-top: -20px; font-size: 15px; }

$(document).on('click', '.panel-heading span.clickable', function(e){ var $this = $(this); if(!$this.hasClass('panel-collapsed')) { $this.parents('.panel').find('.panel-body').slideUp(); $this.addClass('panel-collapsed'); $this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down'); } else { $this.parents('.panel').find('.panel-body').slideDown(); $this.removeClass('panel-collapsed'); $this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up'); } })