ischenkodv/gist:979832

## gistfile1.txt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Открывающаяся панель на MooTools</title>
<script type="text/javascript" src="mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
	var mySlide = new Fx.Slide('section');

	$('toggle').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		e.stop();
	});

	var mySlide2 = new Fx.Slide('section2');

	$('toggle2').addEvent('click', function(e){
		e = new Event(e);
		mySlide2.toggle();
		e.stop();
	});
});

</script>
<style type="text/css">
body{
	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333333;
}
div.container{
	margin:30px auto;
	width:350px;
}
h2{ margin:0px;
	padding:0px;
	border:0px;
}
h2{	color:#FFFFFF;
	font-size:13px;
	display:block;
	background:url(img/h2_bg.gif) top left no-repeat #9A9A9A;
}
h2 span{
	padding:5px 10px;
	background:url(img/h2_span_bg.gif) top right no-repeat;
	display:block;
}
h2 a:link, h2 a:visited{
	color:#FFFFFF;
	text-decoration:none;
	display:block;
}
.section {
	background:url(img/section_bg_left.png) bottom left  no-repeat #EEEEEE;
	font-size:12px;
}
.section div{
background:url(img/section_bg_right.png) right bottom no-repeat;
	padding:10px;
}
</style>
</head>

<body>
<div class="container">
<!-- Панель #1 -->
<h1>Открывающаяся панель используя эффект "toggle" из MooTools</h1>
<br />
<br />
<h2><span><a href="#" id="toggle">Панель</a></span></h2>
<div id="section" class="section">
    <div>Это панель с четрьмя закругленными углами.
    <br />
	Щелкните на заголовке чтобы спрятать её.
    </div>
</div>
<br/>
<!-- Панель #2 -->
<h2><span><a href="#" id="toggle2">Панель</a></span></h2>
<div id="section2" class="section">
    <div>Это панель с четрьмя закругленными углами.
    <br />
	Щелкните на заголовке чтобы спрятать её.
    </div>
</div>
</div>
<br>
</body>
</html>
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Открывающаяся панель на MooTools</title>
	<script type="text/javascript" src="mootools.min.js"></script>
	<script type="text/javascript">
	window.addEvent('domready', function(){
	var mySlide = new Fx.Slide('section');

	$('toggle').addEvent('click', function(e){
	e = new Event(e);
	mySlide.toggle();
	e.stop();
	});

	var mySlide2 = new Fx.Slide('section2');

	$('toggle2').addEvent('click', function(e){
	e = new Event(e);
	mySlide2.toggle();
	e.stop();
	});
	});

	</script>
	<style type="text/css">
	body{
	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333333;
	}
	div.container{
	margin:30px auto;
	width:350px;
	}
	h2{ margin:0px;
	padding:0px;
	border:0px;
	}
	h2{ color:#FFFFFF;
	font-size:13px;
	display:block;
	background:url(img/h2_bg.gif) top left no-repeat #9A9A9A;
	}
	h2 span{
	padding:5px 10px;
	background:url(img/h2_span_bg.gif) top right no-repeat;
	display:block;
	}
	h2 a:link, h2 a:visited{
	color:#FFFFFF;
	text-decoration:none;
	display:block;
	}
	.section {
	background:url(img/section_bg_left.png) bottom left no-repeat #EEEEEE;
	font-size:12px;
	}
	.section div{
	background:url(img/section_bg_right.png) right bottom no-repeat;
	padding:10px;
	}
	</style>
	</head>

	<body>
	<div class="container">
	<!-- Панель #1 -->
	<h1>Открывающаяся панель используя эффект "toggle" из MooTools</h1>
	<br />
	<br />
	<h2><span><a href="#" id="toggle">Панель</a></span></h2>
	<div id="section" class="section">
	<div>Это панель с четрьмя закругленными углами.
	<br />
	Щелкните на заголовке чтобы спрятать её.
	</div>
	</div>
	<br/>
	<!-- Панель #2 -->
	<h2><span><a href="#" id="toggle2">Панель</a></span></h2>
	<div id="section2" class="section">
	<div>Это панель с четрьмя закругленными углами.
	<br />
	Щелкните на заголовке чтобы спрятать её.
	</div>
	</div>
	</div>
	<br>
	</body>
	</html>
	</body>
	</html>