Плавное раскрытие и сворачивание блока
Имеется скрипт который позволяет раскрывать и сворачивать блоки при этом позиция блока запоминается в cookie, но слишком всё резко, нужно добавить плавности при сворачивание и разворачивание блока
вот код ----------------------------------------------- function setCookie(name, value, expiredays, path, domain, secure) { if (expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); var expires = exdate.toGMTString(); } document.cookie = name + "=" + escape(value) + ((expiredays) ? "; expires=" + expires : "") + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + ((secure) ? "; secure" : ""); } function getCookie(name) { var cookie = " " + document.cookie; var search = " " + name + "="; var setStr = null; var offset = 0; var end = 0; if (cookie.length > 0) { offset = cookie.indexOf(search); if (offset != -1) { offset += search.length; end = cookie.indexOf(";", offset) if (end == -1) { end = cookie.length; } setStr = unescape(cookie.substring(offset, end)); } } return setStr; } function block_now(id) { if(getCookie(id) == 1) { display = 'none'; setCookie(id, 0, 90, "/"); } else { display = ''; setCookie(id, 1, 90, "/"); } document.getElementById(id).style.display = display; } function block_start(id) { var cookie_stat = getCookie(id); if((cookie_stat == 1) || (!cookie_stat)){ display = ''; } else { display = 'none'; } document.getElementById(id).style.display = display; } Подключается это так <script type="text/javascript" src="{THEME}/js/block.js"></script> <script type="text/javascript"> function block_search(){ block_start("blok_1"); block_start("blok_2"); // block_start("blok_3"); // block_start("blok_4"); // добавляет столько вызовов функций, сколько у вас будет блоков } </script> И так <table> <tr onClick="block_now('blok_1')" style="cursor:pointer;"> <th>Заголовок блока</th> </tr> <tr id="blok_1" style=""> <td>Содержимое блока</td> </tr> </table> Помогите пожалуйста очень нужно :) |
Ну вот так можно:
function block_now(id) { if(getCookie(id) == 1) { $('#' + id).stop().slideUp(); setCookie(id, 0, 90, "/"); } else { $('#' + id).stop().slideDown(); setCookie(id, 1, 90, "/"); } } только библиотеку jquery подключить, если у вас не подключена |
Цитата:
|
У вас jquery подключена?
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript"> function setCookie(name, value, expiredays, path, domain, secure) { if (expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); var expires = exdate.toGMTString(); } document.cookie = name + "=" + escape(value) + ((expiredays) ? "; expires=" + expires : "") + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + ((secure) ? "; secure" : ""); } function getCookie(name) { var cookie = " " + document.cookie; var search = " " + name + "="; var setStr = null; var offset = 0; var end = 0; if (cookie.length > 0) { offset = cookie.indexOf(search); if (offset != -1) { offset += search.length; end = cookie.indexOf(";", offset) if (end == -1) { end = cookie.length; } setStr = unescape(cookie.substring(offset, end)); } } return setStr; } function block_now(id) { if(getCookie(id) == 1) { $('#' + id).stop().slideUp(); setCookie(id, 0, 90, "/"); } else { $('#' + id).stop().slideDown(); setCookie(id, 1, 90, "/"); } } function block_start(id) { var cookie_stat = getCookie(id); if((cookie_stat == 1) || (!cookie_stat)){ display = ''; } else { display = 'none'; } document.getElementById(id).style.display = display; } </script> <table> <tr onClick="block_now('blok_1')" style="cursor:pointer;"> <th>Заголовок блока</th> </tr> <tr> <td> <div id="blok_1"> Содержимое блока <br> Содержимое блока <br> Содержимое блока <br> Содержимое блока <br> Содержимое блока </div> </td> </tr> </table> <script> block_start("blok_1"); </script> |
можно и так :
<style> div { -moz-transition : height 1s ease-in-out; transition : height 1s ease-in-out; -webkit-transition : height 1s ease-in-out; -o-transition : height 1s ease-in-out; overflow: hidden; height: 200px; /* пример. */ } div.an{ height: 0; } </style> <script type="text/javascript"> function setCookie(name, value, expiredays, path, domain, secure) { if (expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); var expires = exdate.toGMTString(); } document.cookie = name + "=" + escape(value) + ((expiredays) ? "; expires=" + expires : "") + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + ((secure) ? "; secure" : ""); } function getCookie(name) { var cookie = " " + document.cookie; var search = " " + name + "="; var setStr = null; var offset = 0; var end = 0; if (cookie.length > 0) { offset = cookie.indexOf(search); if (offset != -1) { offset += search.length; end = cookie.indexOf(";", offset) if (end == -1) { end = cookie.length; } setStr = unescape(cookie.substring(offset, end)); } } return setStr; } function block_now(id) { if(getCookie(id) == 1) { //set class document.getElementById(id).className = "an"; setCookie(id, 0, 90, "/"); } else { //remove class document.getElementById(id).className = ""; setCookie(id, 1, 90, "/"); } } function block_start(id) { var cookie_stat = getCookie(id); if((cookie_stat == 1) || (!cookie_stat)){ display = ''; } else { display = 'none'; } document.getElementById(id).style.display = display; } </script> <table> <tr onClick="block_now('blok_1')" style="cursor:pointer;"> <th>Заголовок блока</th> </tr> <tr> <td> <div id="blok_1"> Содержимое блока <br> Содержимое блока <br> Содержимое блока <br> Содержимое блока <br> Содержимое блока </div> </td> </tr> </table> |
jQuery разумеется подключен
|
Сделал как показал kostr, но закрытый блок при перезагрузке страницы, иногда на немного открывается.
И как бы иконки подцепить + и - (откр. закр. блок) |
Часовой пояс GMT +3, время: 08:58. |