я пробовал...немного не получается...
подскажите пожалуйста как сделать чтобы когда левый блок раскрывался, правый оставался на месте!
спасибо
<!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>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<style type="text/css">
#panel {
background: #0099FF;
color: #FFFFFF;
height: 200px;
width: 200px;
padding: 5px;
display: none;
}
#panel1 {
background: #00FFCC;
color: #FFFFFF;
height: 200px;
width: 200px;
padding: 5px;
display: none;
margin-left:200px;
}
#bl1 {
width:99px;
}
#bl2 {
margin-left:300px;
width:200px;
}
.btn-slide {
background: #CCCCCC;
color: #0066FF;
}
.active {
background: #FFFF99;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<div id="panel">
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te
feugait nulla facilisi.
</div>
<div id="bl1"><a href="" class="btn-slide">Нажми на меня!</a></div>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide1").click(function(){
$("#panel1").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<div id="panel1">
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te
feugait nulla facilisi.
</div>
<div id="bl2"><a href="" class="btn-slide1">Нажми на меня!</a></div>
</body>
</html>
|
