Js Help!

[dreadrocky]

Hello everyone. I am new to the website, but I've been doing scripting for awhile. I have just recently started learning Javascript. I decided to skip it and move on with other things until now.My problem, I can't seem to get any kind of (show/hide) script to work. Can anyone send me a script that will work? Thank you.

[Skemcin]

At the top of this discussion category, I created a thread with a bunch of helpful snippets. In there you will find a show/hide script:http://w3schools.invisionzone.com/index.php?showtopic=9500Good Luck and welcome to the forums.

[dreadrocky]

At the top of this discussion category, I created a thread with a bunch of helpful snippets. In there you will find a show/hide script:http://w3schools.invisionzone.com/index.php?showtopic=9500Good Luck and welcome to the forums.

I looked at that script before anything. But like most things I've tried to do for this script, it wont work. It has to be just me. Like I said, I'm new at javascript. Can anyone just explain to me how to use this script, incase I might have done it wrong?Other then that, can anyone tell me another way of doing it?

[jeffman]

The idea is to toggle the CSS display attribute between one that is visible (like block or inline) and none, which is completely invisible. You can also toggle the visibility property, but the results are different. An element with {visibility:hidden} still takes up space on the page; it's just invisible. An element with {display:none} is simply gone. It's space is reclaimed by the page and other elements will fill it.Any time you're toggling a property, the idea works the same. You use an if/else (or a ternary conditional). If the property is one thing, switch it to the other. If it's the other, switch it back.EDIT: see post #8

[dreadrocky]

The idea is to toggle the CSS display attribute between one that is visible (like block or inline) and none, which is completely invisible. You can also toggle the visibility property, but the results are different. An element with {visibility:hidden} still takes up space on the page; it's just invisible. An element with {display:none} is simply gone. It's space is reclaimed by the page and other elements will fill it.Any time you're toggling property, the idea works the same. You use an if/else (or a ternary conditional). If the property is one thing, switch it to the other. If it's the other, switch it back.So here is one way:

function toggle_display (id) {	el = document.getElementById(id);	if (el.style.display != "block") {		el.style.display = "none";	} else {		el.style.display = "block";	 }}

It can get more complicated if you like, but this is basic.

So from this information I am guessing that You would write the other half of the script like so...

<font color="DDDDDD" onclick="toggle_display()">(-/+)</font><br><div id="block">Hidden Text</div>

Please correct me specificly if I'm wrong.I don't catch on to things if your not telling meexactly whats wrong and how to fix it.

[jeffman]

More like this:

<span class="something" onclick="toggle_display('my_div')">(-/+)</span><div id="my_div">	Hidden Text</div>

I changed the id of the div to make sure you understood that "block" is a possible value of the CSS display property. Also, <font> is a deprecated element, so you would not use that. You can assign the same style to a span.If you want the div hidden when the page first loads, add this CSS:

div#my_div {	display:none;}

Unless maybe you have more than one that needs to be toggled, in which case you should use a class designator instead of an id designator.

[Pollux]

Just to correct a couple of minor mistakes...The toggle_display() function should be:

function toggle_display (id) {	el = document.getElementById(id);	if (el.style.display != "none") {		el.style.display = "none";	} else {		el.style.display = "block";	 }}

Otherwise it won't toggle correctly. Also, when calling the toggle_display() function, the parameter should be a string. So the other snippet would be more like this:

<span class="something" onclick="toggle_display('my_div')">(-/+)</span><div id="my_div">	Hidden Text</div>

[jeffman]

Yup! Even better, though:

function toggle_display (id) {	el = document.getElementById(id);	if (el.style.display == "none" || el.style.display == "") {		el.style.display = "block";	} else {		el.style.display = "none";	 }}

If you haven't explicitly declared a display value, it returns as an empty string, not the default, even if its behavior is default.I should never post code on my way out the door!

[dreadrocky]

Wow, thank you guys so much. I can't exactly find out if this works yet. I am still in school.But I think I got the right idea, I just hope it will work. I've tried a million things and this just wont work for me. But I'll give your idea's a shot. I'll come back if they don't work.But you said something about if I wanted to do multiple hide/display...What would be the difference? Because I am setting this up for my forum which will be setup to repeat along with the rest of the content. I intend to use something like

<?$i=1;<!-- PHP DB script here -->loop{echo "Category Title";echo "<span onclick="toggle_display('my_div" . $i . "')">(+/-)</span>";echo "<div id="my_div" . $i "">Board Listing</div>";$i++;}?>

Okay so that isn't any where near close to what I have or even a real script. But its just to give a simple idea.I more then likely wont even use "echo".

[jeffman]

So in your CSS, you have a declaration like this:

div.hidden {	display: hidden;}

Now you can have an infinite number of hidden divs, as long as they have that classname:

<div class="hidden">Hidden stuff</div><div class="hidden">Hidden stuff</div><div class="hidden">Hidden stuff</div>etc.

If you want to toggle all these divs at once, you might do it like this:

function toggle_display () {	var divs = document.getElementsByTagName('div');	for (var i = 0; i < divs.length; i++) {		if (divs[i].className == "hidden") {			if (divs[i].style.display == "none") {				divs[i].style.display = "block";			} else {				divs[i].style.display = "none";			}		}	}}

There is a getElementsByClassName method in HTML5, and the newest browsers support it, but older versions don't, so it's not safe to use.