Показать сообщение отдельно
  #3 (permalink)  
Старый 01.05.2011, 15:34
Новичок на форуме
Отправить личное сообщение для andys Посмотреть профиль Найти все сообщения от andys
 
Регистрация: 01.05.2011
Сообщений: 5

я пробовал...немного не получается...

подскажите пожалуйста как сделать чтобы когда левый блок раскрывался, правый оставался на месте!

спасибо

<!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>

Последний раз редактировалось andys, 01.05.2011 в 15:37.
Ответить с цитированием