Comments on: Javascript Code to show a hidden element | Display and Visibility

By: David

David — Sun, 20 Jul 2008 08:13:34 +0000

Yes, that helped. In short, title=* performs the same function as the alt=* property after an IMG tag in HTML, and is likewise optional. Thanks.

By: Evan Mullins

Evan Mullins — Sat, 19 Jul 2008 22:07:58 +0000

@ David - Thanks! I’m guessing you’re meaning title=”Hide2″ ?
I don’t see any other place I use title… Title is just the text that appears when you hover over the link.
The id has to be specific and that’s how the script knows what to change and the class is just used for styles.
Hope that helps! =)

By: David

David — Sat, 19 Jul 2008 02:35:34 +0000

Very useful script, which, unlike the one I had been using, works in Firefox.

I have a question: How important is /title=”Hide1″/ in your script? I left it out, and its absence did not impair the running of the script at all.

By: faolie

faolie — Tue, 01 Jul 2008 16:49:55 +0000

Hi, thanks. Quite simple really - here’s what I used if anyone wants to know:

on (press) {

import flash.external.*;
ExternalInterface.call(”toggleVisibility”);
}

By: Evan Mullins

Evan Mullins — Thu, 26 Jun 2008 17:45:19 +0000

@faolie- sure! It shouldn’t be hard.
I’ve already detailed actionscript and javascript communication, it should be simple to combine these two techniques into one for your project…
Check this post out: Actionscript Javascript Communication | ExternalInterface call and addCallback Tutorial

By: faolie

faolie — Thu, 26 Jun 2008 09:16:11 +0000

Great post - clear and concise.
Can you help me take it further? Is it possible to pass the onclick from flash? For example, I have a flash movie, which when clicked turns a page. But I’d also like this click to display a normal html menu. So I could use this post to do it (I think) but I’m not a flash guy though and I’m struggling to see the relationship between the actionscript and the javascript. Any pointers?

Thanks

By: Evan Mullins

Evan Mullins — Thu, 29 May 2008 17:47:40 +0000

@Susan-
Yes, each element needs it’s own id, the above function is just for hiding/showing the specified id ‘toggleMe’ which is hard coded in the function. You can pass in an argument which would abstract the functionality of the function quite a bit: You pass in the specific element id you want to toggle.

function toggleSpecific(elementid) {
  var node = document.getElementById(elementid);
  if(node.style.display == '') {
    node.style.display='none';
  }
  else {
    node.style.display = '';
  }
}

And here’s some html example for how to use it.

 onclick="toggleSpecific('hide1');">Click to Hide 1

onclick="toggleSpecific('hide2');">Click to Hide 2

onclick="toggleSpecific('hide1');toggleSpecific('hide2');">Click to Hide Both

or using anchor tags: href="javascript:toggleSpecific('hide2');" title="Hide2">Click this link to hide 2

class="hide" id="hide1">Hide this one

class="hide" id="hide2">Hide this too

Here, I’ve uploaded another example page: jsToggleSpecific.html

By: Susan

Susan — Thu, 29 May 2008 04:27:14 +0000

I have the same issue that nOObie had — I have multiple items I want to toggle the display on. I’ve changed the id so that they are each unique, but I don’t know how to write the ‘argument’ when the function is called to make them work properly. Right now clicking on any of the ‘toggle item’ links makes just the last item toggle. Can anyone give me help?

By: Evan Mullins

Evan Mullins — Tue, 13 May 2008 18:12:30 +0000

I’ve updated the files to have toggleDisplay() and also toggleVisibility() functions. Let me know how it goes!

By: Evan Mullins

Evan Mullins — Tue, 13 May 2008 17:28:10 +0000

Amandeep,
So you want to hide your column, but have it’s place left blank?
I’d have to see your design to say which would be best, but there are a few ways you could do this:
1. You could try having an empty column to be swapped out with the one you have content in when you hide/show the content.
2. You could try changing the color to make the text invisible on the background but still hold it’s place.
3. Maybe display=none isn’t the style property you’re looking for: try swapping out the ‘display: none;’ with ‘visibility: hidden;’ and ‘display=”"‘ with ‘visiblilty=”visible”‘ Display is a property that will change the layout of the page, while visibility leaves the layout the same and hides the content.
Here’s the source code

function toggleVisibility() {
      if(document.getElementById("toggleMe").style.visibility == "hidden" ) {
      document.getElementById("toggleMe").style.visibility = "visible";
      }
      else {
      document.getElementById("toggleMe").style.visibility = "hidden";
      }
      }

 onclick="toggleVisibility();">Click to toggle.
       id="toggleMe" style="visibility: hidden"> Something to Hide, but still affects layout.