Background:
I am building a mockup of what our application will look like and adding some JQuery to do some normal JS things like hiding, replacing, and animating certain elements. This mockup is being demoed for our users so we can get feedback on functionality before we code the backend.
Problem:
I want to be able to hide the body of some the panels I have created (note: using twitter bootstrap its panel-body in the example). Once I am finished there will be multiple panels with different options and the users would click the arrows to show or hide the different options.
Now I know that JQuery provides some plugins (tabs/accordions) that I could be using but since I am just out of School and still learning I would like to not use a plugin and just stick with the JQuery APIs and build my own effects.
HTML:
<div class="panel panel-info find-replace-form">
<div class="panel-heading">Find and Replace - by Site Location or Number <button class="btn btn-default" id="hider-site"><span class="glyphicon glyphicon-chevron-down" ></span></button></div>
<div class="panel-body" id="hide-sitelocation">
<h3>Search by Site Location <strong>OR</strong> Site Number:</h3>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Site Location (Address)</label>
<div class="input-width-200"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter Site Location" style="margin:0 auto;"></div>
</div>
<h3><span class="label label-warning">OR</span></h3>
<div class="form-group">
<label for="exampleInputEmail1">Site Number</label>
<div class="input-width-200"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter Site Number"></div>
</div>
<a href="#search" class="btn btn-default" id="search"><span class="glyphicon glyphicon-search"></span> Click to Search</a>
</form>
<div id="hide-results">
<h3 class="text-center">Results</h3>
<h4 class="text-center"><span class="label label-default">Check the assets you would like to change Service Tag names.</span><h4>
<table class="table table-striped table-bordered text-center">
<tr class="success">
<td><div class="input-width-75">Asset to<br> rename?</div></td>
<td>Site Number</td>
<td>Site Location</td>
<td>PID</td>
<td>Service Tag</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>123</td>
<td>123 Main Street</td>
<td>H400-0038-1000</td>
<td>ATL-123-450</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>123</td>
<td>123 Main Street</td>
<td>H400-0038-1000</td>
<td>ATL-123-451</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>123</td>
<td>123 Main Street</td>
<td>H400-0038-1000</td>
<td>ATL-123-452</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>123</td>
<td>123 Main Street</td>
<td>H400-0038-1000</td>
<td>ATL-123-453</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>123</td>
<td>123 Main Street</td>
<td>H400-0038-1000</td>
<td>ATL-123-454</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>123</td>
<td>123 Main Street</td>
<td>H400-0038-1000</td>
<td>ATL-123-455</td>
</tr>
</table>
</div>
<br>
<hr>
<h3>Find and Replace Service Tags:</h3>
<a href="#show-example" class="btn btn-danger btn-sm" id="show-example">Click for an explination</a>
<br>
<p class="alert alert-danger" id="hide-example">For example:<br>If you are moving assets from an Atlanta (ATL-) location to a New York City (NYC-) location and wanted to change the prefix for each service tag.</p>
<br>
<div class="form-group">
<label for="exampleInputEmail1">FIND:</label>
<div class="input-width-200"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="FIND: ATL-" style="margin:0 auto;"></div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">REPLACE WITH:</label>
<div class="input-width-200"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="REPLACE WITH: NYC-" style="margin:0 auto;"></div>
</div>
<button class="btn btn-default" data-toggle="modal" href="#myModal" ><span class="glyphicon glyphicon-retweet"></span> Click to Find & Replace</button>
</div>
</div>
JQuery:
$(document).ready(function(){
$("#hide-results").hide();
$("#search").click(function(){
$("#hide-results").show(500);
});
$("#hide-example").hide();
$("#show-example").click(function(){
$("#hide-example").show(500);
});
/* This is causing problems: */
$("#hide-sitelocation").hide();
$("#hider-site").click(function() {
$("hide-sitelocation").show(500);
$("#hider-site").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
})
});
JS Fiddle: http://jsfiddle.net/7L5HC/1/
The other Hides and Shows work great but not with the panel.