Jump to content

Hide/show tags in HTML


Recommended Posts

I'm doing a website project on FrontPage 03, which has a jeopardy game in it. I need a way to put tags in that would hide the answer till someone clicked it. I did a bit of googling already, but couldn't find anything good.

 

I know you can do this with JavaScript, but I'd prefer to stay with just HTML.

 

EDIT - Apparently you can't do this with HTML, so does anyone know how to do it in javascript?

Link to comment
Share on other sites

Javascript that modifies style properties works well

Novite_Mike.png

The corp beast, is, well, just a corp beast. He doesnt even have any friends.

[spoiler=Other Quotes]tbh idk why this makes me laugh so hard

All DFS threads turn into efficiency flame wars >.>

>OP asks "why use DFS?"

>everyone says "there is no reason"

>someone says "stop bashing people who use DFS, efficiency troll ass clown"

>thread is now a flame fest

 

Link to comment
Share on other sites

I wouldn't use Frontpage if I were you, puts in a lot of junk. I prefer using Notepad++, or Aptana Studio (free) if you like the auto-suggest feature.

Link to comment
Share on other sites

I don't know HTML very well, so I'm using the split view so I can see the HTML build, but still see the final product and edit it like Word. I have no problem with using Javascript though, I just don't know how to implement it.

Link to comment
Share on other sites

javascript.js

function toggleDisplayById(id)
{
var element = document.getElementById(id);
if(element.style.display == "none")
{
	element.style.display = "block";
}
else
{
	element.style.display = "none";
}
}

 

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<button type="button" onclick="toggleDisplayById('aaaaaa')">Click Me!</button>
<div id="aaaaaa">
	<p>text</p>
</div>
</body>
</html>

 

Notes:

#use css with style -

display:none;

for hiding on page load

 

Edit:

function modDisplayById(id, value)
{
var element = document.getElementById(id);
if(element)
{
	element.style.display = value;
}
}

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<button type="button" onclick="modDisplayById('aaaaaa', 'block')">Show</button>
<button type="button" onclick="modDisplayById('aaaaaa', 'none')">Hide</button>
<div id="aaaaaa">
	<p>text</p>
</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
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.