jquery: раскрывающийся текст.

[Heidel]

http://www.sooource.net/jquery-collapsable-blocks

скрипт (текст раскрывается при клике на ссылку, при повторном клике - сворачивается, текст ссылки при этом не меняется)

<sсript type="text/javasсript">
$(document).ready(function(){
	//Раскрывающийся список
	$(".view-source #hide").hide();
        $(".view-source a#click").toggle(
            function(){
        $("#hide").slideDown(500);
            }, 
          function(){
        $("#hide").slideUp(500);
          });
}); 
</sсriрt>

html-код (+ функция неткат)

<div class='view-source'>
	<h3><a href="#" id="click">Заполнить на сайте</a></h3>
		<div id="hide">
			<?= nc_objects_list(346, 535, "&recNum=1")?>
		</div>
</div>

НЕСКОЛЬКО раскрывающихся пунктов
html-код

<h2 class='headline'>Каталог</h2>
<div class='news floatbox'>
	
<div class='view-source'>
	<div class="cat_click"><h3>Магнитные барабаны и сепараторы барабанного типа</h3></div>
		<div class="cat_list">
			<?= nc_objects_list(342, 529, "&nc_ctpl=530")?>
		</div>
</div>

<div class='view-source'>
	<div class="cat_click"><h3>Магнитные плиты и сепараторы подвесного типа</h3></div>
		<div class="cat_list">
			<?= nc_objects_list(343, 530, "&nc_ctpl=530")?>
		</div>
</div>

<div class='view-source'>
	<div class="cat_click"><h3>Магнитные решетки и сепараторы штыревого типа</h3></div>
		<div class="cat_list">
			<?= nc_objects_list(344, 531, "&nc_ctpl=530")?>
		</div>
</div>
</div>

скрипты и стили в макете дизайна

<? if( $sub == 336) {
		?>

<style  type="text/css">
	/*Заглавные пункты списка*/
	.cat_click > h3 { color: #0099CC; background: transparent; text-decoration: underline; }
	.cat_click > h3:hover { text-decoration: none; outline: 0 none; cursor: pointer;  }
</style>
	
<sсript type="text/javasсript">
    //Раскрывающийся список
     $(document).ready(function(){
        $(".cat_list").hide();
        $(".cat_click").click(function(){
            $(this).closest(".view-source").find(".cat_list").slideToggle('slow');
            return false;
        });
    });
</sсriрt>
		<?
	}
 		?>	

@темы: HTML, CSS, jQuery, Ссылки