I'm pretty new to jquery and I've been trying to add a 'clip' slide-open effect to a static bit of jquery I have.
this is the effect that I'm after...
http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=jquery_142
and this is my code:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
div { margin: 0px; width: 100%; height: 80px; background: green; position: relative; }
</style>
<script>
var divs = $('section div'),
links = $('a');
links.click(function(){
$(this.hash).toggle().siblings().hide();
});
</script>
<style>
section div {
display: none;
width:100%;
height: 200px;
background-color: lime;
}
nav a {
padding: 10px;
background-color: red;
color: white;
display: inline-block;
}
</style>
</head>
<body style="margin:0px;">
<section>
<div id="1">
<a href="#1" style="float:right;">X</a>
<a href="#2">next »</a>
</div>
<div id="2">
<a href="#2" style="float:right;">X</a>
<a href="#1">« prev</a>
<a href="#3">next »</a>
</div>
<div id="3">
<a href="#3" style="float:right;">X</a>
<a href="#2">« prev</a>
<a href="#4">next »</a>
</div>
<div id="4">
<a href="#4" style="float:right;">X</a>
<a href="#3">« prev</a>
<a href="#1">next »</a>
</div>
</section>
<nav>
<a href="#1">one</a>
<a href="#2">two</a>
<a href="#3">three</a>
<a href="#4">four</a>
</nav>
</body>
</html>
you can see it in action here:
http://jsfiddle.net/greggb/8gfEZ/1/
Any help with this would be great, I've tried loads of forums but just cant get my head round how to do it.
