collapsible lists in FrontPage

  • Thread starter FontPage novice
  • Start date
F

FontPage novice

How do I create an "expand all" option for collapsible lists in FrontPage?
 
F

FrontPage novice

I have Googled my text but cannot seem to find what I am looking for. I
viewed your website and it is exactly what I am looking for except I'm not
sure how you set it up in FrontPage. Is there some sort of link I need to
insert?
 
T

Trevor Lawrence

Hi

The code is entered into the Code view of FrontPage. So you would need to
copy the code from http://tandcl.homemail.com.au/sitemap.html and amend it
to suit your purposes

The <head> section needs the JS
<script type="text/javascript">
function showVisible(i,hide) {
var sign = (hide) ? "plus" : "minus"
document.images["image" + i].src = "images/display/" + sign + ".gif"
document.getElementById("ulist" + i).style.display = (hide!='hide') ?
"block" : "none"
} //------------------------------

function ExpandAll(hide) {
var i = 0
while (document.images["image" + (++i)])
showVisible(i,hide)
} //------------------------------

function changeVisibility(i) {
var hide = (document.images["image" + i].src.match(/^.+minus\.gif$/)) ?
'hide' : ''
showVisible(i,hide)
} //------------------------------
</script>

In the <body> section you need to copy my structure of the list elements,
i.e. those with the <li> tag. This is a typical one:
<li>
<a href="javascript:changeVisibility(6);">
<img src="images/display/plus.gif" alt="" id="image6" width="15"
height="15" /></a>
<a href="index.html">Trevor and Carole's Home Page (index.html)</a>
<ul id="ulist6">
<li><img src="images/display/smfile.gif" alt="" /><a
href="abcnews.html">ABC News</a></li>
<li><img src="images/display/smfile.gif" alt="" /><a
href="bbcnews.html">BBC News</a></li>
</ul>
</li>

In this group, there are two <li> elements which collapse, viz "ABC News"
and "BBC News". These must be enclosed by the tags <ul ></ul>, and the id
numbers must match all the way. That is the "6" must appear in
<a href="javascript:changeVisibility(6);">
<img src="images/display/plus.gif" alt="" id="image6" width="15"
height="15" /></a>
<ul id="ulist6">

You also need the + and - gifs which you can get from
http://tandcl.homemail.com.au/images/display/plus.gif and
http://tandcl.homemail.com.au/images/display/minus.gif. Store these on the
same folders in your web, i.e
http://yourweb.com/images/display/plus.gif and
http://yourweb.com/images/display/minus.gif.

If you need any more help, please post a link to a web page, whether it is
working or not
 

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

Top