Javascript toggle

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Javascript toggle

Post 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?
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

something like this:

Code: Select all

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

</script>
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

Code: Select all

function toggle(elt_id) {
   var elt = document.getElementById(elt_id);
   elt.style.display = (elt.style.display == 'none') ? 'block' : 'none';
}
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Maybe for some inspiration:
http://www.dustindiaz.com/seven-togglers/
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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' : '' );
}
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post 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)
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

n00b Saibot wrote:no issues of typo 8)
:lol: Except maybe this one...

Code: Select all

widnow.onload = attachShowHideChildren;
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

awww :oops:

well, did that work for ya?
Post Reply