jQuery Hide Show

by erick

HTML

<ul class="controller">
  <li><a class="front" href="#">Bring to front</a></li>
  <li><a class="back" href="#">Send to back</a></li>
</ul>

<div class="focus-me">
    <a class="back" style="float:right;position:relative;top:-10px;">Close me</a>
</div>

<div class="test">Other content will adjust to original position upon hiding of other div</div>

CSS

html, body {margin:0;padding:0;height:}
body {font-family:arial;font-size:12px}

ul.controller {width:225px;height:25px;list-style:none;margin:5px auto;padding:0;}
ul.controller li {float:left;margin-right:2px}
ul.controller li a {display:block;padding:5px 15px;background:#bbb;text-decoration:none;color:#000}
ul.controller li a:hover {background:#000;color:#fff}
.test {width:400px;background:#ddd;margin:0 auto;text-align:center;padding:10px;margin-top:10px;}

.focus-me {
    position:relative;
    z-index:5;
    background:#000;
    color:#fff;
    width:700px;
    margin:0 auto;
    height:300px;
    padding:20px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
    border-radius:10px;
}
.focus-me a {color:#fc0;cursor:pointer}
.focus-me a:hover {color:#fff}

JavaScript

$(document).ready(function() {
    $(".back").click(function () {
      $(".focus-me").hide('fade');
    });
    $(".front").click(function () {
      $(".focus-me").show('fade');
    });
});