2 Replies - 664 Views - Last Post: 23 March 2012 - 06:49 AM

#1 black_yurizan  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 86
  • Joined: 18-June 11

How to make hide and show button?

Posted 23 March 2012 - 06:08 AM

I'm trying to make a button that if you click it, it will hide the content. And if you click it again, the content will appear. Sounds simple right? For some reason I can't make that happen



<p id="hide"> This will hide content</p>
<button onclick="vise()">click this</button>

<script>
 var choice= new Boolean ("false");
function vise()
{

 var hide= document.getElementById("hide");

if( choice =="false")
{
hide.this.style.display="block"
choice="true"

}

 if (choice=="true" ){
hide.this.style.display="none";
choice="false";

}
</script>






Logically, this function should work but it's never hiding or opening. Please help

Is This A Good Question/Topic? 0
  • +

Replies To: How to make hide and show button?

#2 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 947
  • View blog
  • Posts: 2,355
  • Joined: 15-February 11

Re: How to make hide and show button?

Posted 23 March 2012 - 06:35 AM

Hey,

You have a mismatched brace because you didn't close the function vise().

You're also misunderstanding the Boolean object. It is used as a cast per say. Basically the variable choice is equivalent to true since only an empty string evaluates to false. Instead of doing string comparisons use the primitive boolean values.

e.g.
var choice = false;
// ...
if(choice == false) {
   // ...
   choice = true;
}



The object hide also does not have a property called this. hide.style.display will do just fine. Instead of having to separate IF statements which are inefficient use the ELSE clause since if choice does not evaluate to false then it must be true.
Was This Post Helpful? 1
  • +
  • -

#3 black_yurizan  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 86
  • Joined: 18-June 11

Re: How to make hide and show button?

Posted 23 March 2012 - 06:49 AM

ok I figured it out it's like this



<button onclick="vise()">Click this </button>
<div id='hide' >
<p>Something , something , something, darkside
</p>
</div>
<script type="text/javascript">
 var choice= false;
function vise()
{

 var hide= document.getElementById("hide");

if( choice==false)
{
hide.style.display="none";
choice=true

}

 else if (choice==true ){
hide.style.display="block";
choice=false;
alert(choice);
}


 }
 
</script>


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1