Показать скрыть элемент

[irkprin]

Помогите, люди умные

Размещаю на страничке такую рабочую конструкцию:

<div id="expandAll">развернуть</div>
<div id="collapseAll">свернуть</div>

Она прекрасно сворачивает и разворачивает меню.

-------------------------
Задача оставить одну ссылку, вначале:

<div id="expandAll">развернуть</div>

а после клика по ней:

<div id="collapseAll">свернуть</div>

-------------------------
Решение:

var a=false
  function linkchange(obj) {
   if  (a){
	obj=document.getElementById('linkchangeid'); 
	obj.innerHTML ='<div id="expandAll">развернуть</div>'; 
   } else {
	obj=document.getElementById('linkchangeid'); 
	obj.innerHTML ='<div id="collapseAll">свернуть</div>';
   }
  a=!a
 }

<div id="linkchangeid" onclick="linkchange(this)"><div id="expandAll">развернуть</div></div>

И вроде как должно работать, и ссылка по клику меняется, но почему-то меню срабатывает только первый раз?

[vadim5june]

Если Вы таким странным образом меняете то нужно каждый раз события "прикручивать"
лучше сделать одну функцию toggleAll а менять только надпись а не весь элемент

[irkprin]

Я пробовал использовать встроенный toggle, проблема в том, что он открывает закрытые и закрывает открытые. Мне нужно чтобы по клику открывались все и закрывались все.

как поменять этот код:

// handle toggle event
			function toggler() {
				$(this)
					.parent()
					// swap classes for hitarea
					.find(">.hitarea")
					
						.swapClass( CLASSES.collapsableHitarea, CLASSES.expandableHitarea )
						.swapClass( CLASSES.lastCollapsableHitarea, CLASSES.lastExpandableHitarea )
					.end()
					// swap classes for parent li
					.swapClass( CLASSES.collapsable, CLASSES.expandable )
					.swapClass( CLASSES.lastCollapsable, CLASSES.lastExpandable )

					// find child lists
					.find( ">ul" )
					// toggle them
					.heightToggle( settings.animated, settings.toggle );
				if ( settings.unique ) {
					$(this).parent()
						.siblings()
						// swap classes for hitarea
						.find(">.hitarea")
							.replaceClass( CLASSES.collapsableHitarea, CLASSES.expandableHitarea )
							.replaceClass( CLASSES.lastCollapsableHitarea, CLASSES.lastExpandableHitarea )
						.end()
						.replaceClass( CLASSES.collapsable, CLASSES.expandable )
						.replaceClass( CLASSES.lastCollapsable, CLASSES.lastExpandable )
						.find( ">ul" )
						.heightHide( settings.animated, settings.toggle );
				}  
			}
			this.data("toggler", toggler);

я ума не приложу...

[irkprin]

эту часть я не использую:

if ( settings.unique ) {
					$(this).parent()
						.siblings()
						// swap classes for hitarea
						.find(">.hitarea")
							.replaceClass( CLASSES.collapsableHitarea, CLASSES.expandableHitarea )
							.replaceClass( CLASSES.lastCollapsableHitarea, CLASSES.lastExpandableHitarea )
						.end()
						.replaceClass( CLASSES.collapsable, CLASSES.expandable )
						.replaceClass( CLASSES.lastCollapsable, CLASSES.lastExpandable )
						.find( ">ul" )
						.heightHide( settings.animated, settings.toggle );
				}

[vadim5june]

Я наверно те ту toggle имел ввиду
У Вас же все работает с двумя ссылками
Вам нельзя писать вот эту строчку

obj.innerHTML ='<div id="collapseAll">свернуть</div>';

потому что события пропадают
либо события сделайте используя on или
вместо этого надо просто менять надпись-свернуть-развернуть
а id="toggleAll" будет постоянным но запускаться поочереди 2 функции

[irkprin]

не получается...

[irkprin]

// factory for treecontroller
			function treeController(tree, control) {
				// factory for click handlers
				function handler(filter) {
					return function() {
						// reuse toggle event handler, applying the elements to toggle
						// start searching for all hitareas
						toggler.apply( $("div." + CLASSES.hitarea, tree).filter(function() {
							// for plain toggle, no filter is provided, otherwise we need to check the parent element
							return filter ? $(this).parent("." + filter).length : true;
						}) );
						return false;
					};
				}
				// click on first element to collapse tree
				$("a:eq(0)", control).click( handler(CLASSES.collapsable) ); // 1 ссылка только открывает все
				// click on second to expand tree
				$("a:eq(1)", control).click( handler(CLASSES.expandable) ); // 2 ссылка только закрывает все
				// click on third to toggle tree
				$("a:eq(2)", control).click( handler() ); // 3 ссылка открывает все закрытые, закрывает все открытые, при повторном клике все наоборот
			}

а нужна 1 ссылка, которая будет открывать все и закрывать все поочереди

[vadim5june]

Ну я вам и написал как это сделать например

$("a:eq(0)", control).on("click", function(){handler(CLASSES.collapsable)});

ну и вторую ссылку "a:eq(1)" аналогично
остальное оставить как было

[irkprin]

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

[irkprin]

вот так поменял:

//$("a:eq(0)", control).click( handler(CLASSES.collapsable) );
$("a:eq(0)", control).on("click", function(){handler(CLASSES.collapsable)});
// click on second to expand tree
//$("a:eq(1)", control).click( handler(CLASSES.expandable) );
$("a:eq(1)", control).on("click", function(){handler(CLASSES.expandable)});