Jump to content

Hide A Div Without Declairing The Id


DarkxPunk

Recommended Posts

This my be impossible but it does not hurt to try. Is it possible to hide a div without declairing its id. The purpose I see for this is so I can use one function multiple times within a single page. My idea is something along these lines. You have a button say: Show. When you click Show it looks for the div that follows it and sets it to display=none; so: Clicking Show will show<div><a onclick="hideshow()">Show</a></div>This div below<div>Content to Show</div> and if I click show it will hide the content. The key is the function must look for the following div and hide it using display=none; Any ideas? Is it possible?

Link to comment
Share on other sites

yeah it's possible, you could send "this" (the a element) to hideshow(), fetch the parent element (the first div), then keep fetching the next sibling element until it's an element node and the node name is 'div' (the second div), like:

<div><a onclick="hideshow(this)">Show</a></div>

function hideshow(a) {var element = a.parentNode.nextSibling;while (element.nodeType != 1 && element.nodeName != 'div') {element = element.nextSibling;}element.style.display = element.style.display == 'none' ? 'block' : 'none';}

Link to comment
Share on other sites

That works awesomely. Would you be able to break it down so I can understand? Also is it possible to have it start hidden? If you broke it down so I can understand I will be able to make changes myself. Thanks allot!

Link to comment
Share on other sites

when the <a> element gets clicked on, the hideshow() function will be called with 1 parameter. that parameter will be the <a> element, ("this" in the onclick attribute)the parentNode property gets the parent node of the <a> element, which will be the <div> surrounding the <a>. the nextSibling property returns the node after the one it's being used on.we keep fetching the next node into the "element" variable until the node type is 1 (element) and the node name is 'div'. i think there are 3 text nodes between the first and second divs:1) The new line between "</div>" and "This"2) The text "This div below"3) The new line between "below" and "<div>" to make it start hidden, you can just add style='display: none'

<div style='display: none'>Content to Show</div>

parentNode, nextSibling, nodeType & nodeName properties can all be found here: http://www.w3schools.com/dom/dom_node.aspnode types (1 = element) are listed here (at the bottom): http://www.w3schools.com/dom/dom_nodetype.asp

Link to comment
Share on other sites

I am interested in this technique, but I'm not sold on the necessity of this particular usage. The button might as well specify the div in some manner since it is right next to it in the code. The KISS principle would cause me to do the simpler thing. However, I have been thinking about a different situation where such DOM walking might have some appeal for me -- if I set up things in PHP so that form values are returned to the user even if JS is disabled then when JS --IS-- enabled I might have an entire form that needs to be cleared by the Clear button. This might be a good DOM walking application where the JS function would step through the inputs inside the form and clear them all (since reset would not work).

Link to comment
Share on other sites

...Or.. if you have many other elements with that div you want to hide, you can try this:

<!doctype html><html><head><title></title> <script type="text/javascript">function hideshow(a){var element = a.parentNode.nextSibling;  while (element.nextSibling){   if(element.nodeName == 'DIV')  {   break;  }  element = element.nextSibling;}element.style.display = element.style.display == 'none' ? 'block' : 'none';} </script></head><body><div><a onclick="hideshow(this)">Show</a></div><h1>Hello world!</h1><h2>Hello world again</h1><p>Merry Christmas!</p><div>Content to Show</div> </body></html>

Just thought I'd put it out there.

Link to comment
Share on other sites

Hey. Code is working great except one problem. Every time I load the page it requires two clicks to load the div, but after the initial first two clicks it starts working with just one click. HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><title>Zeitgeist Toronto</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><script type="text/javascript" src="js/buttons.js"></script></head><body><div id="n12122011"><h2>Ungrip Screening</h2><p>Time: 7:00 PM<br />Date: Thursday January 5th, 2012<br />Location: OISE, 252 Bloor Street West (St. George Station), Auditorium (<a onclick="hideShow(this)">Map</a>)</p><div></div></div><div id="n12122011"><h2>Ungrip Screening</h2><p>Time: 7:00 PM<br />Date: Thursday January 5th, 2012<br />Location: OISE, 252 Bloor Street West (St. George Station), Auditorium (<a onclick="hideShow(this)">Map</a>)</p><div></div></div></body></html>

JavaScript Code

function hideShow(a) {var element = a.parentNode.nextSibling;while (element.nodeType != 1 && element.nodeName != 'div') {element = element.nextSibling;} element.innerHTML = element.innerHTML == ' ' ? '<iframe width=\"700\" height=\"500\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" src=\"http://maps.google.ca/maps/ms?msa=0&msid=203146017338240958552.0004b3ca872d9d4e63b8a&ie=UTF8&t=h&vpsrc=6&ll=43.668411,-79.398692&spn=0.002014,0.00375&z=18&iwloc=0004b3ca89be3700fc4f5&output=embed\"></iframe><br /><small>View <a href=\"http://maps.google.ca/maps/ms?msa=0&msid=203146017338240958552.0004b3ca872d9d4e63b8a&ie=UTF8&t=h&vpsrc=6&ll=43.668411,-79.398692&spn=0.002014,0.00375&z=18&iwloc=0004b3ca89be3700fc4f5&source=embed\" style=\"color:#0000FF;text-align:left\">OISE</a> in a larger map</small>' : ' ';}

Any clues? Also is it possible for it to look for say 'class' rather than 'nodeName'? Thanks for all the help.

Link to comment
Share on other sites

change both occurrences of ' ' to '', so it matches and sets a blank string instead of a space character. you can use element.className which returns a string of all the class names separated by spaces. or use getElementsByClassName() on this: <div id="n12122011">but the id cannot be the same for another element in the document.https://developer.mozilla.org/en/DOM/document.getElementsByClassName

Link to comment
Share on other sites

change both occurrences of ' ' to '', so it matches and sets a blank string instead of a space character.
Thank you! That worked!
you can use element.className which returns a string of all the class names separated by spaces. or use getElementsByClassName() on this: <div id="n12122011">but the id cannot be the same for another element in the document.https://developer.mo...entsByClassName
This is working great as well thanks!
Link to comment
Share on other sites

Hey everyone. I seem to have hit another bump. HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><title>Zeitgeist Toronto</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><script type="text/javascript" src="js/buttons.js"></script></head><body><div id="n12122011"><h2>Ungrip Screening</h2><p>Time: 7:00 PM<br />Date: Thursday January 5th, 2012<br />Location: OISE, 252 Bloor Street West (St. George Station), Auditorium (<a onclick="oiseMap(this)">Map</a>)</p><div class="oiseMap"></div><p>We are very proud to welcome Ben Stewart, director and producer of 'Kymatica' and 'Esoteric Agenda' who will be presenting his new film 'Ungrip'.</p><p>Ben will be present at the screening to answer questions along with Rob of the Page Family who is featured in the film.</p><hr class="subRuler" /><a onclick="hideShow(this)">About the film:</a><div style="display: none"><p>At a major juncture in his life, Rob of the Page Family began down a road less traveled to free himself from fear, government control, and reliance on public energy and food supply, and shares his journey that led him off the grid. The purpose of this film is not to provide legal advice, nor is it to simply educate, but rather as inspirational fuel to become more of what we already are.</p></div><hr class="subRuler" /><p>To see the trailer, visit the official websites:<br /><a href="http://www.hangedmanproject.com/" target="_blank" >http://www.hangedmanproject.com/</a> and <a href="http://consciousselfgovernance.ca/" target="_blank" >http://consciousselfgovernance.ca/</a></p></div></body></html>

JavaScript

function oiseMap(a) {var element = a.parentNode.nextSibling;while (element.className != 'oiseMap') {element = element.nextSibling;} element.innerHTML = element.innerHTML == '' ? '<iframe width=\"700\" height=\"500\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" src=\"http://maps.google.ca/maps/ms?msa=0&msid=203146017338240958552.0004b3ca872d9d4e63b8a&ie=UTF8&t=h&vpsrc=6&ll=43.668411,-79.398692&spn=0.002014,0.00375&z=18&iwloc=0004b3ca89be3700fc4f5&output=embed\"></iframe><br /><small>View <a href=\"http://maps.google.ca/maps/ms?msa=0&msid=203146017338240958552.0004b3ca872d9d4e63b8a&ie=UTF8&t=h&vpsrc=6&ll=43.668411,-79.398692&spn=0.002014,0.00375&z=18&iwloc=0004b3ca89be3700fc4f5&source=embed\" style=\"color:#0000FF;text-align:left\">OISE</a> in a larger map</small>' : '';} function hideShow(a) {var element = a.parentNode.nextSibling;while (element.nodeType != 1 && element.nodeName != 'div') {element = element.nextSibling;} element.style.display = element.style.display == 'none' ? 'block' : 'none';}

As you will be able to tell the map is working great. Now I am trying to make a new button following a different function. I copied and pasted the function and for some reason it refuses to work. Any ideas? Am I missing something?

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...