"Noozer" <> wrote in message news:<k2Msd.434866$nl.289708@pd7tw3no>...
> I have several tags on a webpage of the same class. If the user clicks a
> specific checkbox I'd like to be able to alter the display property of the
> class, affecting all objects of that class.
>
> This is an intranet application so we know that javascript will be enabled
> and the browser will be IE.
>
> How can I affect all the members of this class? Is there a way I can toggle
> the DISPLAY property of a class so all the elements using that class would
> be affected?
>
> ie:
>
> default.css file contains the following and is included into the HTLM
> document:
>
> .topicone { display:none; }
> .topictwo { display:none; }
>
> Relevant section of HTML code:
> <input type="checkbox" onclick="flip('topicone')'">Show me information
> about topic one.<br>
> <input type="checkbox" onclick="flip('topictwo')'">Show me information
> about topic two.<br>
> <p>Please see the following:</p>
> <p> Quick Points </p>
> <p class="topicone">This is some information about topic one.</p>
> <p class="topictwo">This is some information about topic two.</p>
> <p> Details </p>
> <p class="topicone">More information about topic one.</p>
> <p class="topicone">More information about topic one.</p>
> <p class="topictwo">This is some information about topic two.</p>
Not really enough information, but...IE-only:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>untitled</title>
<style type="text/css">
body {
font: normal 90% verdana;
}
..topicone {
font: normal 80% verdana;
color: #600;
display: none;
}
..topictwo {
font: normal 80% verdana;
color: #060;
display: none;
}
</style>
<script type="text/javascript">
function IE_set_class(clanSheetame)
{
var re = new RegExp(clanSheetame);
var rules, nRule,
nRules, SS, nSheet = 0,
nSheets = document.styleSheets.length;
for (nSheet; nSheet < nSheets; ++nSheet)
{
SS = document.styleSheets.item(nSheet);
rules = SS.rules;
nRules = rules.length;
for (nRule = 0; nRule < nRules; ++nRule)
{
rule = SS.rules.item(nRule);
if (re.test(rule.selectorText))
{
for (var a = 1; a < arguments.length; a+=2)
rule.style[arguments[a]] = arguments[a + 1];
return;
}
}
}
}
function toggleclass(obj)
{
var dval = obj.checked ? 'block' : 'none';
IE_set_class(obj.value, 'display', dval)
}
onload = function()
{//keep things in sync
var i = 0,
ipt,
ipts = document.getElementsByTagName('input');
while (ipt = ipts.item(i++))
if (/toggle/i.test(ipt.name))
ipt.onclick();
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="toggle" value="topicone"
onclick="toggleclass(this)">Show me information
about topic one.<br>
<input type="checkbox" name="toggle" value="topictwo"
onclick="toggleclass(this)">Show me information
about topic two.<br>
<p>Please see the following:</p>
<p> Quick Points </p>
<p class="topicone">This is some information about topic one.</p>
<p class="topictwo">This is some information about topic two.</p>
<p> Details </p>
<p class="topicone">More information about topic one.</p>
<p class="topicone">More information about topic one.</p>
<p class="topictwo">This is some information about topic two.</p>
</form>
</body>
</html>
Similar Threads
