chien_fu Posted February 6, 2008 Share Posted February 6, 2008 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 More sharing options...
jeffman Posted February 6, 2008 Share Posted February 6, 2008 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 More sharing options...
jesh Posted February 6, 2008 Share Posted February 6, 2008 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.