<ul class="bulleted">
<li class="smallmargin">Intel Celeron 2.66GHz Processor</li>
<li class="smallmargin" id="hidden">533 MHz Front-side Bus</li>
<li class="smallmargin">512MB DDR 400 RAM</li>
<li class="smallmargin">80GB SATA Hard Drive</li>
<li class="smallmargin">17" CRT monitor</li>
<li class="smallmargin">High Speed CD Burner</li>
<li class="smallmargin" id="hidden">107 Key Keyboard</li>
<li class="smallmargin" id="hidden">Optical 3-Button Scroll Mouse Combo</li>
<li class="smallmargin" id="hidden">Six Total USB 2.0 Ports (4 Rear, 2 Front)</li>
<li class="smallmargin" id="hidden">3.5" Floppy Drive</li>
<li class="smallmargin">SiS Onboard 3D Video/Graphics Adapter</li>
<li class="smallmargin" id="hidden">6 Channel 32 Bit Digital Sound</li>
<li class="smallmargin" id="hidden">56k v.92 Fax Modem</li>
<li class="smallmargin">10/100 LAN Port</li>
<li class="smallmargin">Creative Stereo Speakers</li>
<li class="smallmargin">Windows XP Home</li>
<li class="smallmargin">1 year carry-in warranty </li>
</ul>
And I want the <li> tags with the "hidden" id to be hidden when the page loads, but show up if the user clicks a certain button... I thought I could accomplish this with something like this...
ID's have to be unique to the document ... i.e. you can only use them once. Unfortunately I can't offer much help but that since JS is kinda my weak point.
yea.. thanks though. I know their supposed to be used for one element... but I just don't know how to accomplish this... even using different ids for each li element doesn't work, because it just makes them disappear... it doesn't adjust the list height or anything. I don't know how I'm going to do this honestly.
why not just set the style of the element to 'display:none', then if the button you want to show them is clicked change the property to 'block' or 'inline'.
var liTags = document.getElementsByTagName('li'); //All <li> tags in document
for (var x in liTags)
{
if (liTags[x].id == 'hidden') liTags[x].style.visibility = 'hidden';
}
Here is your solution.
Explanation:
ids cannot be used. since an id refers to an element so you can hide or display one element even when several elements have the same id
getElementsByName() is a good choice but unfortunately names are assigned only to input elements
we can assign class for every html element. we use class for distinction.
we can retrieve all li elements using getElementsByTagName("LI").
Rest you should be ablet to understand.
I see you already have a solution but I thought I'd throw my 2 cents into the mix. I can't claim to be responsible for writing this...also can't remember where I found it!
<script type="text/javascript" language="javascript">
// this function gets all the editing blocks and hides them
function hideBlocks (className) {
var all = document.all ? document.all :
document.getElementsByTagName('*');
var elements = new Array();
for (var e = 0; e < all.length; e++)
if (all[e].className == className)
all[e].className="hide";
return elements;
}
// this function gets all the editing blocks and displays them
function shoeBlocks (className) {
var all = document.all ? document.all :
document.getElementsByTagName('*');
var elements = new Array();
for (var e = 0; e < all.length; e++)
if (all[e].className == className)
all[e].className="edit_block";
return elements;
}
</script>
.edit_block{
/* what ever you want it so look like while visible */
}
.hide{
/* this hides the tag + its content */
visibility:hidden;
width:1px;
height:1px;
}