Jump to content

How to make a word "appear" on button push.


chien_fu
 Share

Recommended Posts

I'm working on a flash card program in ASP and am still quite new to CSS and java, and am wondering if anyone has any suggestions that would help me accomplish this. When the page loads, there is a table with two columns, we'll call them the "question" and "answer" columns. Right now I've got it set up so that you can select whether to display the question or the answer, or both. I'd like there to be another button "show all" that displays all of the fields preferably without having to reload the page. Is there a good CSS or java way to accomplish this? Basically making a variable appear in the cell of a table at the push of a button?Thanks!

Link to comment
Share on other sites

Lots of ways. The easiest would be some variation on the CSS property called visibility. Possible values are "visible" and "hidden". Most elements support this property. Set it up with something like this in your style sheet:span.hidden {visibility: hidden;}Your table would have a td + span set up like this:<td><span class="hidden" id="answer1">Answer</span></td>Set up your button like this:<button onclick='showElements()'>Show me</button> And then a function in your script like this:function showMe(){

a = document.getElementById("answer1");a.style.visibility = "visible";

}I've shown you raw concepts. Obviously you'll need to adapt them to your situation.

Link to comment
Share on other sites

The only thing to keep in mind about "visibility" is that the element is still rendered to the page - that is, the space that the element would normally take up if it were visible is still taken up by the hidden element.If you want the element to not take up the space, you can use the "display" property and set it to "none".

/* this element will take up the space on the page, but will be invisible */span.hidden {visibility: hidden;}/* this element will not take up space on the page - it would be as if it were not there at all */span.gone {display: none;}

To see this, load up this code first with "visibility:hidden" and again with "display:none".

<html><head><style>#test{  height: 400px;  visibility: hidden;}</style></head><body><div id="test">Hidden text.</div><div>Some other text.</div></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...