Jump to content

Recommended Posts

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites
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?
Link to post
Share on other sites

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

Link to post
Share on other sites
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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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>

Link to post
Share on other sites

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!

Link to post
Share on other sites

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".

Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...