Плавное сворачивание/разворачивание div

Тема в разделе "Другие языки", создана пользователем rasandrey, 19 апр 2011.

Модераторы: Цукер
  1. rasandrey

    rasandrey

    Регистр.:
    2 апр 2009
    Сообщения:
    214
    Симпатии:
    6
    Помогите, плиз с JS.
    Есть верстка блока (в приложении) и выложил здесь http://upgrade.dp.ua/euroteplo/s/d.html как делать ПЛАВНОЕ сворачивание/разворачивание?
     

    Вложения:

    • s.rar
      Размер файла:
      67,3 КБ
      Просмотров:
      13
  2. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    например с jquery, цепляем обработку кликов напрямую на id=sv1, id=sv2, тогда onclick и ссылки не нужны.
    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    
        <link rel="stylesheet" href="d.css" type="text/css" media="screen, projection" />
        
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        
        <script type="text/javascript">
        $(document).ready(function(){
            $("#sv1").click(function(){ 
                $("#sv1").hide();
                $("#sv2").show(); 
                $("#form2").slideToggle('slow'); 
            });
            $("#sv2").click(function(){ 
                $("#sv2").hide();
                $("#sv1").show(); 
                $("#form2").slideToggle('slow'); 
            });
            
        });
        </script>
        
        
    <style type="text/css">
    <!--
    .filter .center .inner .svertish, .filter .center .inner .svertish2{
        cursor:pointer;
    }
    -->
    </style>
    </head>
    
    <body>
    
    
                    <div class="filter">
                        <div class="top"></div>
                        <div class="center">
                            <div class="inner">
                                <div class="head_f">Фильтр каталога</div>
                                <div id="sv1" class="svertish"><img src="images/svertish.gif" alt="" /> развернуть</div>
                                <div id="sv2" class="svertish2"><img src="images/svertish2.gif" alt="" /> скрыть</div>
                                <div class="clr"></div>
                                <div id="form2"><br />
                                    <form action="" method="post">
                                    <div class="pol1">
                                        <div class="top"><div class="head">производитель <a href="" title=""><img src="images/ask.png" alt="" /></a></div><div class="clr"></div></div>
                                        <div class="center">
                                            <div class="inor">
                                                <div class="oneckeck"><input type="checkbox" name="pr1" value="1" /> <a href="" title="">BAXI (Италия)</a></div>
                                                <div class="oneckeck"><input type="checkbox" name="pr2" value="2" /> <a href="" title="">Lamborghini (Италия)</a></div>
                                                <div class="oneckeck"><input type="checkbox" name="pr3" value="3" /> <a href="" title="">Rapido (Германия)</a></div>
                                                <div class="oneckeck"><input type="checkbox" name="pr4" value="4" /> <a href="" title="">Styleboiler (Италия)</a></div>
                                            </div><div class="clr"></div>
                                        </div>
                                        <div class="bottom"></div>
                                    </div>
                                    <div class="pol2">
                                        <div class="top"><div class="head">топливo <a href="" title=""><img src="images/ask.png" alt="" /></a></div><div class="clr"></div></div>
                                        <div class="center">
                                            <div class="inor">
                                                <div class="oneckeck"><input type="checkbox" name="pr1" value="1" /> Твердое</div>
                                                <div class="oneckeck"><input type="checkbox" name="pr2" value="2" /> Газ</div>
                                                <div class="oneckeck"><input type="checkbox" name="pr3" value="3" /> Дизельное</div>
                                                <div class="oneckeck"><input type="checkbox" name="pr4" value="4" /> Электрический</div>
                                                <div class="oneckeck"><input type="checkbox" name="pr4" value="4" /> Комбинированные</div>
                                            </div><div class="clr"></div>
                                        </div>
                                        <div class="bottom"></div>
                                    </div>
                                    <div class="pol3">
                                        <div class="top"><div class="head">монтаж <a href="" title=""><img src="images/ask.png" alt="" /></a></div><div class="clr"></div></div>
                                        <div class="center">
                                            <div class="inor">
                                                <div class="oneckeck"><input type="checkbox" name="pr1" value="1" /> Настенный</div>
                                                <div class="oneckeck"><input type="checkbox" name="pr2" value="2" /> Напольный</div>
                                            </div><div class="clr"></div>
                                        </div>
                                        <div class="bottom"></div>
                                    </div>
                                    <div class="pol4">
                                        <div class="top"><div class="head">Материал <a href="" title=""><img src="images/ask.png" alt="" /></a></div><div class="clr"></div></div>
                                        <div class="center">
                                            <div class="inor">
                                                <div class="oneckeck"><input type="checkbox" name="pr1" value="1" /> Чугунный</div>
                                                <div class="oneckeck"><input type="checkbox" name="pr2" value="2" /> Стальной</div>
                                            </div><div class="clr"></div>
                                        </div>
                                        <div class="bottom"></div>
                                    </div><div class="clr"></div>
                                    <div class="pol5">
                                        <div class="top"><div class="head">Количество контуров <a href="" title=""><img src="images/ask.png" alt="" /></a></div><div class="clr"></div></div>
                                        <div class="center">
                                            <div class="inor">
                                                <div class="oneckeck"><input type="checkbox" name="pr1" value="1" /> Одноконтурные</div>
                                                <div class="oneckeck"><input type="checkbox" name="pr2" value="2" /> Двухконтурные</div>
                                            </div><div class="clr"></div>
                                        </div>
                                        <div class="bottom"></div>
                                    </div>
                                    <div class="pol6">
                                        <div class="top"><div class="head">Цена <a href="" title=""><img src="images/ask.png" alt="" /></a></div><div class="clr"></div></div>
                                        <div class="center">
                                            <div class="inor">
                                                <div class="oneckeck"><input type="checkbox" name="pr1" value="1" /> Одноконтурные</div>
                                                <div class="oneckeck"><input type="checkbox" name="pr2" value="2" /> Двухконтурные</div>
                                            </div><div class="clr"></div>
                                        </div>
                                        <div class="bottom"></div>
                                    </div>
                                        <input type="image" class="pol7_btb" src="images/button3.gif" value="" />
                                        <div class="clr"></div>
                                    </form><br />
                                </div>                            
                            </div>
                        </div>
                        <div class="bottom"></div>
                    </div>
    
    
    </body>
    </html>    
    

    или ещё короче скрипт
    HTML:
    
        <script type="text/javascript">
        $(document).ready(function(){
            $("#sv1,#sv2").click(function(){ 
                $("#sv1").toggle();
                $("#sv2").toggle(); 
                $("#form2").slideToggle('slow'); 
            });
        });
        </script>
    
     
    rasandrey нравится это.