Change existing javascript, hide/unhide thing

Dutch_guy
Dutch_guy used Ask the Experts™
on
I use this simple script to hide/ unhide some content:

http://webdesign.about.com/od/dhtml/a/aa101507.htm

With this script I have two buttons. They both can hide/ unhide some content. My problem is that if button A is selected and I click again on button A, the content disappears. I want it that it always show default content.

Basically I want that if I click on Button A, it must not be possible to click on it again. Because that would make the content disappear.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
if you don't want that link to be clickable again, then why dont you simply remove the href attribute and onclick event handler from that link

you can either do
document.getElementById("linkId").href = null;
or
document.getElementById("linkId").removeAttribute("href",1);
check this link http://www.roseindia.net/javascript/javascript-removeattribute-method.shtml

you can later put the link back again using addAttribute (like second one) or simply assigning the attribute value later (like first one)

<style type="text/css">
.hidden { display: none; visibility: hidden;}
.unhidden { display: block; visibility: visible;}
</style>
<script type="text/javascript">
function unhide(divID,id) {
if(id == 1){
document.getElementById("botton1").disabled = true;
document.getElementById("botton2").disabled = false;
}else{
document.getElementById("botton2").disabled = true;
document.getElementById("botton1").disabled = false;
}
  var item = document.getElementById(divID);
  if (item) {
    item.className=(item.className=='hidden')?'unhidden':'hidden';
  }
}
</script>

<input id="botton1" onClick="unhide('learnHTML',1)" type="button" value="Unhidden"> 
<input id="botton2" disabled="disabled" onClick="unhide('learnHTML',2)" type="button" value="Hidden"><br><br>


<div id="learnHTML" class="hidden">

<ul>
<li><a href="http://webdesign.about.com/c/ec/9.htm">Free HTML Class</a></li>
<li><a href="http://webdesign.about.com/od/beginningtutorials/a/bl_htmltutorial.htm">HTML Tutorial</a></li>
<li><a href="http://webdesign.about.com/cs/xhtmlxml/a/aa013100a.htm">What is XHTML?</a></li>
</ul>

</div>

Open in new window

Commented:
use a function like this...

function Toggle(buttonId)
{
      var button = document.getElementById(buttonId);
      if(button.disabled == false)
              button.disabled = true;
      else
              button.disabled = false;
}

-Ajitha

Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Sorry, I didn't realize I made a mistake in my question.

I'm not using buttons, but images, like this:

<a href=javascript:unhide2('switch1');javascript:hide('switch2');><img src="images/tab_aanbiedingen.gif" /></a>

So the above solutions will not work since it is not a button. Any idea's ?

@Dutch_guy: Did you tried what i suggested?
I have not talked about buttons.

Thanks

Author

Commented:
Could you explain it a bit more, beacuse I know very little of Javascript...
I had simply suggested that you remove href/onclick attribute from the link.
in other words,
<a href="" onclick="">.....<!--Inside the link, it could be text, div, or an image -->... </a>

if you remove href and onclick attributes, then it will become.

<a>.....<!--Inside the link, it could be text, div, or an image -->... </a>

which is actually not a link.

Then later on you can add these attributes back if you want.

Thanks

Author

Commented:
Looks like this is what I need. Could you provide the script ? I have no idea how to implement this.
Please use the following as reference

<script>

   function removeLink(linkObj)
   {
         linkObj.href = null;
         linkObj.onclick = null;
   }

   function addLink( linkObj )
   {
       objLink.href = ""; \\add the href property
       objLink.onclick = ""; \\add the onclick event handler
   }

</script>

<a href="javascript:removeLink(this)" onclick="removeLink(this)">

Author

Commented:
I eventually changed the button to an image and went for animesxplosion's solution. Works great !

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial