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

R

rasandrey

Участник
Регистрация
2 Апр 2009
Сообщения
214
Реакции
6
Помогите, плиз с JS.
Есть верстка блока (в приложении) и выложил здесь
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
как делать ПЛАВНОЕ сворачивание/разворачивание?
 

Вложения

  • s.rar
    67,3 KB · Просмотры: 14
например с 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>
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху