Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

71 lines (54 sloc) 2.052 kB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Toggler example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="jquery-toggler.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".toggler-dude").toggler();
});
</script>
<style type="text/css">
#togglerOne {
background: #000;
width: 180px;
color: #fff;
}
#togglerTwo {
background: #000;
width: 180px;
color: #fff;
}
.outside{
overflow:hidden;
height:0px;
position:relative;
top:0px;
}
.togglered {
top: -200px;
overflow: hidden;
position: absolute;
height: 200px;
}
.container {
float: left;
}
</style>
</head>
<body>
<div class="container"><!--just to place the 2 divs side by side for the example -->
<a href="" class="toggler-dude" rel="togglerOne">Click me!</a>
<div style="background: #999; width: 180px;">Foo</div>
<div id="togglerOne" class="toggler">I'm gonna be togglered down!</div>
</div>
<div class="container"><!--just to place the 2 divs side by side for the example -->
<a href="" class="toggler-dude" rel="togglerTwo">Or click me!</a>
<div style="background: #999; width: 180px;">Bar</div>
<div id="togglerTwo" class="toggler">I'm gonna be togglered down!</div>
</div>
<div style="width: 100%; float: left;">I'm just going with the flow</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.