Expandable html

D

Doug

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
 
H

Hywel Jenkins

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()
 
D

DesignerNut

<!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="#">[email protected]</a></li>
<li>(608) 555-1234</li>
</ul>
</li>
</ul>
</div>
<!-- end sitenav -->


</body>
</html>
 
R

RobB

Doug said:
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>
 
T

Thomas 'PointedEars' Lahn

DesignerNut said:
<!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>
<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:

<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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,481
Members
44,900
Latest member
Nell636132

Latest Threads

Top