Page 1 of 1

Javascript toggle

Posted: Thu Sep 21, 2006 1:22 pm
by Luke
I would like some assistance in how to create a function that can toggle open/closed it's child categories. I am going to use scriptaculous for the actual show/hide functionality. My question is how I could create a toggle on/off function. I don't know that much javascript, so any help is appreciated. This is what my list looks like...

Code: Select all

  <ul id="main_list">
   <li id="cat1" onclick="toggleCat('cat1_list')"> Category 1
    <ul id="cat1_list">
	 <li>Something in cat1</li>
	 <li>Something in cat1</li>
	 <li>Something in cat1</li>
	 <li>Something in cat1</li>
	</ul>
   </li>
   <li id="cat2" onclick="toggleCat('cat2_list')"> Category 2
    <ul id="cat2_list">
	 <li>Something in cat1</li>
	 <li>Something in cat1
	  <ul id="cat2-subcat1">
	   <li>Subcategory</li>
	   <li>Subcategory</li>
	   <li>Subcategory</li>
	  </ul>
	 </li>
	 <li>Something in cat1</li>
	 <li>Something in cat1</li>
	</ul>
   </li>
   <li id="cat3" onclick="toggleCat('cat3_list')"> Category 3
    <ul id="cat3_list">
	 <li>Something in cat1</li>
	 <li>Something in cat1</li>
	 <li>Something in cat1</li>
	 <li>Something in cat1</li>
	</ul>
   </li>
  </ul>
What would be even cooler, is if the function was smart enough to just automatically know the chile ul's id... can somebody point me in the right direction?

Posted: Thu Sep 21, 2006 1:25 pm
by Burrito
something like this:

Code: Select all

 
<script>
var onoff = true;
function turnOnOff()
{
    onoff = !onoff;
    if(onoff)
        //do stuff
}

</script>

Posted: Thu Sep 21, 2006 1:29 pm
by Luke
so I guess i would have to create a onoff variable for everything that needs to be toggled... hmm... thanks, I will play around with this idea

Posted: Thu Sep 21, 2006 1:32 pm
by Weirdan

Code: Select all

function toggle(elt_id) {
   var elt = document.getElementById(elt_id);
   elt.style.display = (elt.style.display == 'none') ? 'block' : 'none';
}

Posted: Thu Sep 21, 2006 1:32 pm
by Burrito
The Ninja Space Goat wrote:so I guess i would have to create a onoff variable for everything that needs to be toggled...
if you're going to have multiple things that can be on or off at the same time, then yeah, you'd need to identify each one individually.

if only one can be on at a time, you could set the onoff variable to the value of the one that needs to be on.

Posted: Thu Sep 21, 2006 4:38 pm
by matthijs
Maybe for some inspiration:
http://www.dustindiaz.com/seven-togglers/

Posted: Thu Sep 21, 2006 5:13 pm
by nickvd
My favourite way to doing this would be like so:

Code: Select all

//taken from the page matthijs posted, identical to my preferred way
function toggle(obj) {
   var el = document.getElementById(obj);
   el.style.display = (el.style.display != 'none' ? 'none' : '' );
}

Posted: Fri Sep 22, 2006 2:00 am
by n00b Saibot
adapted code from my js lib:

Code: Select all

function showHideChildren(obj)
{
  oNodes = obj.childNodes;
  displayState = oNodes[0].style.display == 'none' ? '' : 'none';
  for (idx = 0; idx < oNodes.length; idx++)
    oNodes[0].style.display = displayState;
}

function attachShowHideChildren()
{
  arrList = document.getElementByTagName('LI');
  for(idx = 0; idx < arrList.length; idx++)
    if(arrList[idx].className.substr(0, 3) == 'cat')
      arrList[idx].onclick = function () { showHideChildren(this); }
}

widnow.onload = attachShowHideChildren;
no messing with HTML, no application of IDs, no issues of typo 8)

Posted: Mon Sep 25, 2006 4:13 pm
by Luke
n00b Saibot wrote:no issues of typo 8)
:lol: Except maybe this one...

Code: Select all

widnow.onload = attachShowHideChildren;

Posted: Tue Sep 26, 2006 3:26 pm
by n00b Saibot
awww :oops:

well, did that work for ya?