By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
426,133 Members | 1,113 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 426,133 IT Pros & Developers. It's quick & easy.

Expandable html

P: n/a
Hi -
I'm looking to code some javascript that has an event handler tied to
an image ("a down arrow") that will expand code that was hidden on the
page load. It's pretty simple, I have an accessories html table that I
want to load in the html but hide to save page real estate until you
click the "down arrow" image. I know I've seen stuff like this before,
can anyone point me to an example of this or give me an idea of how to
code it?

Thanks, Doug

Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
In article <11**********************@z14g2000cwz.googlegroups .com>,
dr******@phreshdesign.com says...
Hi -
I'm looking to code some javascript that has an event handler tied to
an image ("a down arrow") that will expand code that was hidden on the
page load. It's pretty simple, I have an accessories html table that I
want to load in the html but hide to save page real estate until you
click the "down arrow" image. I know I've seen stuff like this before,
can anyone point me to an example of this or give me an idea of how to
code it?


<div>
"display" CSS property
getElementById()

--
Hywel
Jul 23 '05 #2

P: n/a
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Expandable Menus Demo (johnzeratsky.com)</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="" />
<style type="text/css">
<!--

span.expandLink {
font-size: 70%;
color: #333; }

span.expandLink a {
color: #333; }

-->
</style>

<script type="text/javascript">
function toggleSub(submenu) {
if (document.getElementById(submenu).style.display == 'none') {
document.getElementById(submenu).style.display = 'block'
} else {
document.getElementById(submenu).style.display = 'none'
}
}
</script>

</head>
<body>
<div id="sitenav">
<h1>Expandable Menu Demo</h1>

<h2>Foods you grow</h2>
<ul>
<li>
<a href="#">Vegetables</a> <span class="expandLink">(<a href="#"
onclick="toggleSub('vegMore'); return false">toggle</a>)</span>
<ul id="vegMore" style="display: none;">
<li><a href="#">Celery</a></li>
<li><a href="#">Carrots</a></li>
<li><a href="#">Broccoli</a></li>
</ul>
</li>
<li>
<a href="#">Fruits</a> <span class="expandLink">(<a href="#"
onclick="toggleSub('fruitMore'); return false">toggle</a>)</span>
<ul id="fruitMore" style="display: none;">
<li><a href="#">Apple</a></li>
<li><a href="#">Banana</a></li>
<li><a href="#">Tomato?</a></li>
</ul>
</li>

<li>
<a href="#">Other</a> <span class="expandLink">(<a href="#"
onclick="toggleSub('otherMore'); return false">toggle</a>)</span>
<ul id="otherMore" style="display: none;">
<li><a href="#">Mushrooms</a></li>
<li><a href="#">Beef</a></li>
<li><a href="#">Salmon</a></li>
</ul>
</li>

<li><a href="#">Tips for Growing</a></li>

<li>
<a href="#">Contact</a> <span class="expandLink">(<a href="#"
onclick="toggleSub('contactMore'); return false">toggle</a>)</span>
<ul id="contactMore" style="display: none;">
<li><a href="#">em***@email.com</a></li>
<li>(608) 555-1234</li>
</ul>
</li>
</ul>
</div>
<!-- end sitenav -->
</body>
</html>

Jul 23 '05 #3

P: n/a
Doug wrote:
Hi -
I'm looking to code some javascript that has an event handler tied to
an image ("a down arrow") that will expand code that was hidden on the page load. It's pretty simple...
Easy for you to say. #:-0

I have an accessories html table that I
want to load in the html but hide to save page real estate until you
click the "down arrow" image. I know I've seen stuff like this before, can anyone point me to an example of this or give me an idea of how to code it?

Thanks, Doug


Maybe...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<base href="http://www.grsites.com/webgraphics/arrows/oy/">
<style type="text/css">

td.arrow {
width: 20px;
height: 20px;
cursor: pointer;
vertical-align: top;
text-align: center;
padding-top: 8px;
border: 1px #aa0 solid;
background: #aaa;
}
td.content {
width: 300px;
height: 20px;
font: 12px arial;
padding: 6px;
border: 1px #000 solid;
background: #ddd;
}
td h5 {
font: 11px arial;
letter-spacing: .5em;
margin: 0 0 8px 4px;
}
td div {
display: none;
}
#pload {
background: url(arrows_oy_026.gif);
display: none;
}

</style>
<script type="text/javascript">

function init()
{
var t, td, tds, i = 0;
if (document.getElementById
&& (t = document.getElementById('foo'))
&& (tds = t.getElementsByTagName('td')))
{
while (td = tds.item(i++))
{
td.onclick = function()
{
var img = this.getElementsByTagName('img').item(0);
var div = this.parentNode.getElementsByTagName('div').item(0 );
if (img && div)
{
var bWhich = /((^$)|(none))/.test(div.style.display);
div.style.display = bWhich ? 'block' : 'none';
img.src = bWhich ?
'arrows_oy_025.gif' : 'arrows_oy_026.gif';
}
}
}
}
}

window.onload = init;

</script>
</head>
<body>
<span id="pload"></span>
<table id="foo">
<tbody>
<tr>
<td class="arrow">
<img
src="http://www.grsites.com/webgraphics/arrows/oy/arrows_oy_026.gif">
</td>
<td class="content">
<h5>Item 1</h5>
<div>
....blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah....
</div>
</td>
</tr>
<tr>
<td class="arrow">
<img
src="http://www.grsites.com/webgraphics/arrows/oy/arrows_oy_026.gif">
</td>
<td class="content">
<h5>Item 2</h5>
<div>
....blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah....
</div>
</td>
</tr>
<tr>
<td class="arrow">
<img
src="http://www.grsites.com/webgraphics/arrows/oy/arrows_oy_026.gif">
</td>
<td class="content">
<h5>Item 3</h5>
<div>
....blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah....
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Jul 23 '05 #4

P: n/a
DesignerNut wrote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Expandable Menus Demo (johnzeratsky.com)</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
Such a character set declaration is unnecessary in XHTML (especially
when it is "utf-8") since an XML parser will ignore that; the character
encoding used is to be specified in a XML processing instruction.
However, even this is only necessary if that encoding differs from UTF-8:

<http://www.w3.org/TR/xhtml1/#strict>
<http://www.w3.org/TR/xhtml1/#C_9>
<meta name="keywords" content="" />
<style type="text/css">
<!--

span.expandLink {
font-size: 70%;
color: #333; }

span.expandLink a {
color: #333; }

-->
</style>
Since this so far Valid Strict XHTML 1.0, it is likely that you somewhat
disable the `style' element by commenting out its content. An XML
parser is allowed to remove comments before building the parse tree:

<http://www.w3.org/TR/2004/REC-xml-20040204/#sec-comments>

Furthermore, the `style' element is not supposed to work anyway here; in
XML applications, the stylesheet has to be linked to the document using
an XML processing instruction:

<http://www.w3.org/TR/xhtml1/#C_13>
<script type="text/javascript">
function toggleSub(submenu) {
if (document.getElementById(submenu).style.display == 'none') {
This kind of referencing is known to be error-prone; features
(non-backwards compatible objects and their properties) should
be tested for prior to usage.
[...]
<li>
<a href="#">Vegetables</a> <span class="expandLink">(<a href="#"
onclick="toggleSub('vegMore'); return false">toggle</a>)</span>
This menu is not going to work without client-side scripting, if that,
although that would have been possible if created by a competent author.
[...]

PointedEars
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.