hcmn/panel.css

## panel.css
#panel {
    padding: 50px;
    height: 100px;
    width: 500px;
    text-align: center;
    font-size: 24px;
    font-family: Arial;
    font-weight: bold;
    background: #EEE;
    cursor: pointer;
    -webkit-border-bottom-left-radius: 10px;
}

#tab {
    //bottom: -25px;
    right: 0px;
    padding: 10px;
    background: #EEE;
    font-size: 16px;
    text-decoration: none;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    position: relative;
}

## panel.html
<html>
    <head>
        <title>Result</title>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
      <link type="text/css" rel="stylesheet" href="panel.css" />
        <script type="text/javascript" src="panel.js"></script>
    </head>

    <body>
        <div id="panel">
            Awesome hidden sliding panel
        </div>
      	<a href="#panel" id="tab">Click to show</a>
    </body>

</html>

## panel.js
//Sliding panel is initially hidden with tab hanging from top.  Clicking on tab will reveal a sliding panel.
//credit: Adi Dahiya, Codecademy

$(document).ready(function() {
  $('#panel').hide();

  var $panel = $('#panel');
  var $tab = $('#tab');

  $tab.toggle(
    function(event) {
      //can replace below with $panel.slideDown("slow")
      $panel.show("slow");
    },
    function(event) {
      //can replace below with $panel.slideUp("slow")
      $panel.hide("slow");
    }
  );
});
	#panel {
	padding: 50px;
	height: 100px;
	width: 500px;
	text-align: center;
	font-size: 24px;
	font-family: Arial;
	font-weight: bold;
	background: #EEE;
	cursor: pointer;
	-webkit-border-bottom-left-radius: 10px;
	}

	#tab {
	//bottom: -25px;
	right: 0px;
	padding: 10px;
	background: #EEE;
	font-size: 16px;
	text-decoration: none;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	position: relative;
	}
	<html>
	<head>
	<title>Result</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<link type="text/css" rel="stylesheet" href="panel.css" />
	<script type="text/javascript" src="panel.js"></script>
	</head>

	<body>
	<div id="panel">
	Awesome hidden sliding panel
	</div>
	<a href="#panel" id="tab">Click to show</a>
	</body>

	</html>
	//Sliding panel is initially hidden with tab hanging from top. Clicking on tab will reveal a sliding panel.
	//credit: Adi Dahiya, Codecademy

	$(document).ready(function() {
	$('#panel').hide();

	var $panel = $('#panel');
	var $tab = $('#tab');

	$tab.toggle(
	function(event) {
	//can replace below with $panel.slideDown("slow")
	$panel.show("slow");
	},
	function(event) {
	//can replace below with $panel.slideUp("slow")
	$panel.hide("slow");
	}
	);
	});