Skip to content

Instantly share code, notes, and snippets.

@old-campos

old-campos/index.html

Created February 28, 2013 20:35
Show Gist options
  • Save old-campos/5059890 to your computer and use it in GitHub Desktop.
Save old-campos/5059890 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Francisco Campos. Pull-tab jquery
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Slide Panel</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
</head>
<body>
<div class="panel">
<br />
<br />
<p>Now you see me!</p>
</div>
<p class="slide"><a href="#" class="pull-me">Slide Up/Down</a></p>
</body>
</html>
Raw
script.js
$(document).ready(function() {
$(".pull-me").click(function() {
$(".panel").slideToggle("slow");
});
});
$("p").after("<h3>it worked</h3>");
Raw
style.css
body {
margin:0 auto;
padding:0;
width:200px;
text-align:center;
}
a:hover{
-webkit-box-shadow: 0 0 8px #FFD700;
-moz-box-shadow: 0 0 8px #FFD700;
box-shadow: 0 0 8px #FFD700;
cursor:pointer;
}
.panel {
background: #ffffbd;
background-size:90% 90%;
height:300px;
display:none;
font-family:garamond,times-new-roman,serif;
}
.panel p{
text-align:center;
}
.slide {
margin:0;
padding:0;
border-top:solid 2px #cc0000;
}
.pull-me {
display:block;
position:relative;
right:-25px;
width:150px;
height:20px;
font-family:arial,sans-serif;
font-size:14px;
color:#ffffff;
background:#cc0000;
text-decoration:none;
-moz-border-bottom-left-radius:5px;
-moz-border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.pull-me p {
text-align:center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment