expand / collapse list

M

Mary Ann

Hello,

Recently I asked about an expand/ collapse list but received no response. I
went to help in Frontpage, followed directions but still cannot create the
list. can anyone help?
 
T

Trevor L.

Mary said:
Hello,

Recently I asked about an expand/ collapse list but received no
response. I went to help in Frontpage, followed directions but still
cannot create the list. can anyone help?
Click to expand...

An example from my site - a sitemap

<a href='#' onclick="ExpandAll();return false">Expand All</a>&nbsp;|&nbsp;
<a href='#' onclick="ExpandAll('hide');return false">Collapse All</a><br />
Click <img src="images/display/plus.gif" alt="" width="15" height="15" />
to expand
<img src="images/display/minus.gif" alt="" width="15" height="15" />
to collapse<br />

<dt><a href="#" onclick="changeVisibility(1);return false">
<img src="images/display/plus.gif" alt="" id="image1" width="15"
height="15" /></a>
<a href="index.html" class="head4">Trevor and Carole's Home
Page</a></dt>
<ul id="ulist1">
<dt><img src="images/display/smfile.gif"><a
href="picture.html">Picture</a></dt>
<dt><img src="images/display/smfile.gif"><a
href="http://validator.w3.org/check?uri=referer">W3C Markup
Validator</a></dt>
<dt><img src="images/display/smfile.gif"><a
href="http://jigsaw.w3.org/css-validator/">W3C CSS Validator</a></dt>
<dt><img src="images/display/smfile.gif"><a
href="news.html">News</a></dt>
<dt><img src="images/display/smfile.gif"><a href="abcnews.html">ABC
News RSS</a></dt>
<dt><img src="images/display/smfile.gif"><a href="bbcnews.html">BBC
News RSS</a></dt>
</ul>
<!-- repeat for "image2" "ulist2" etc. -->

where
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)
}
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"
}

The contents of the <dt></dt> tags inside "ulist1" are not relevant - they
can be anything.

Clicking ExpandAll will expand all lists of this format.
Clicking CollapseAll will collapse all lists of this format.

Clicking the + will expand one such list
Clicking the - will collapse one such list
 
M

Mary Ann

HI Trevor,

Thank you for the response but I'm not sure what you are saying by sending
me this. I write very little html and I copied what you sent into my site but
I'm not understanding what I'm supposed to do with that.

When I go into help it's says to create the list then click format, click
bullets, click enable collapsible outlines, click ok. I have done this
several times but it's not working. Obviously I'm doing something wrong but I
can't figure out what.

Can someone give me step by step instructions on how to create this list. I
also need to make the list hyperlinks to other pages.

--
Thanks, Mary Ann


Trevor L. said:
Mary said:
Hello,

Recently I asked about an expand/ collapse list but received no
response. I went to help in Frontpage, followed directions but still
cannot create the list. can anyone help?
Click to expand...

An example from my site - a sitemap

<a href='#' onclick="ExpandAll();return false">Expand All</a> |
<a href='#' onclick="ExpandAll('hide');return false">Collapse All</a><br />
Click <img src="images/display/plus.gif" alt="" width="15" height="15" />
to expand
<img src="images/display/minus.gif" alt="" width="15" height="15" />
to collapse<br />

<dt><a href="#" onclick="changeVisibility(1);return false">
<img src="images/display/plus.gif" alt="" id="image1" width="15"
height="15" /></a>
<a href="index.html" class="head4">Trevor and Carole's Home
Page</a></dt>
<ul id="ulist1">
<dt><img src="images/display/smfile.gif"><a
href="picture.html">Picture</a></dt>
<dt><img src="images/display/smfile.gif"><a
href="http://validator.w3.org/check?uri=referer">W3C Markup
Validator</a></dt>
<dt><img src="images/display/smfile.gif"><a
href="http://jigsaw.w3.org/css-validator/">W3C CSS Validator</a></dt>
<dt><img src="images/display/smfile.gif"><a
href="news.html">News</a></dt>
<dt><img src="images/display/smfile.gif"><a href="abcnews.html">ABC
News RSS</a></dt>
<dt><img src="images/display/smfile.gif"><a href="bbcnews.html">BBC
News RSS</a></dt>
</ul>
<!-- repeat for "image2" "ulist2" etc. -->

where
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)
}
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"
}

The contents of the <dt></dt> tags inside "ulist1" are not relevant - they
can be anything.

Clicking ExpandAll will expand all lists of this format.
Clicking CollapseAll will collapse all lists of this format.

Clicking the + will expand one such list
Clicking the - will collapse one such list
--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
Click to expand...
 
M

Murray

Here's a quick and easy way to get expandible lists. This method solves the
problem with FP's collapsible
list code that is NOT FF/NN compatible, and will therefore work in all
browsers.

http://www.murraytestsite.com/collapsiblelist.htm

It uses some CSS, and the FP Change Property behavior.

--
Murray
--------------
MVP FrontPage


Mary Ann said:
HI Trevor,

Thank you for the response but I'm not sure what you are saying by sending
me this. I write very little html and I copied what you sent into my site
but
I'm not understanding what I'm supposed to do with that.

When I go into help it's says to create the list then click format, click
bullets, click enable collapsible outlines, click ok. I have done this
several times but it's not working. Obviously I'm doing something wrong
but I
can't figure out what.

Can someone give me step by step instructions on how to create this list.
I
also need to make the list hyperlinks to other pages.

--
Thanks, Mary Ann


Trevor L. said:
Mary said:
Hello,

Recently I asked about an expand/ collapse list but received no
response. I went to help in Frontpage, followed directions but still
cannot create the list. can anyone help?
Click to expand...

An example from my site - a sitemap

<a href='#' onclick="ExpandAll();return false">Expand All</a> |
<a href='#' onclick="ExpandAll('hide');return false">Collapse All</a><br
/>
Click <img src="images/display/plus.gif" alt="" width="15" height="15"
/>
to expand
<img src="images/display/minus.gif" alt="" width="15" height="15"
/>
to collapse<br />

<dt><a href="#" onclick="changeVisibility(1);return false">
<img src="images/display/plus.gif" alt="" id="image1" width="15"
height="15" /></a>
<a href="index.html" class="head4">Trevor and Carole's Home
Page</a></dt>
<ul id="ulist1">
<dt><img src="images/display/smfile.gif"><a
href="picture.html">Picture</a></dt>
<dt><img src="images/display/smfile.gif"><a
href="http://validator.w3.org/check?uri=referer">W3C Markup
Validator</a></dt>
<dt><img src="images/display/smfile.gif"><a
href="http://jigsaw.w3.org/css-validator/">W3C CSS Validator</a></dt>
<dt><img src="images/display/smfile.gif"><a
href="news.html">News</a></dt>
<dt><img src="images/display/smfile.gif"><a href="abcnews.html">ABC
News RSS</a></dt>
<dt><img src="images/display/smfile.gif"><a href="bbcnews.html">BBC
News RSS</a></dt>
</ul>
<!-- repeat for "image2" "ulist2" etc. -->

where
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)
}
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"
}

The contents of the <dt></dt> tags inside "ulist1" are not relevant -
they
can be anything.

Clicking ExpandAll will expand all lists of this format.
Clicking CollapseAll will collapse all lists of this format.

Clicking the + will expand one such list
Clicking the - will collapse one such list
--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
Click to expand...
Click to expand...
 
M

Mary Ann

Ok, followed the link and I'm still confused. I need this in easier terms.

--
Thanks, Mary Ann


Murray said:
Here's a quick and easy way to get expandible lists. This method solves the
problem with FP's collapsible
list code that is NOT FF/NN compatible, and will therefore work in all
browsers.

http://www.murraytestsite.com/collapsiblelist.htm

It uses some CSS, and the FP Change Property behavior.

--
Murray
--------------
MVP FrontPage


Mary Ann said:
HI Trevor,

Thank you for the response but I'm not sure what you are saying by sending
me this. I write very little html and I copied what you sent into my site
but
I'm not understanding what I'm supposed to do with that.

When I go into help it's says to create the list then click format, click
bullets, click enable collapsible outlines, click ok. I have done this
several times but it's not working. Obviously I'm doing something wrong
but I
can't figure out what.

Can someone give me step by step instructions on how to create this list.
I
also need to make the list hyperlinks to other pages.

--
Thanks, Mary Ann


Trevor L. said:
Mary Ann wrote:
Hello,

Recently I asked about an expand/ collapse list but received no
response. I went to help in Frontpage, followed directions but still
cannot create the list. can anyone help?

--
Thanks, Mary Ann

An example from my site - a sitemap

<a href='#' onclick="ExpandAll();return false">Expand All</a> |
<a href='#' onclick="ExpandAll('hide');return false">Collapse All</a><br
/>
Click <img src="images/display/plus.gif" alt="" width="15" height="15"
/>
to expand
<img src="images/display/minus.gif" alt="" width="15" height="15"
/>
to collapse<br />

<dt><a href="#" onclick="changeVisibility(1);return false">
<img src="images/display/plus.gif" alt="" id="image1" width="15"
height="15" /></a>
<a href="index.html" class="head4">Trevor and Carole's Home
Page</a></dt>
<ul id="ulist1">
<dt><img src="images/display/smfile.gif"><a
href="picture.html">Picture</a></dt>
<dt><img src="images/display/smfile.gif"><a
href="http://validator.w3.org/check?uri=referer">W3C Markup
Validator</a></dt>
<dt><img src="images/display/smfile.gif"><a
href="http://jigsaw.w3.org/css-validator/">W3C CSS Validator</a></dt>
<dt><img src="images/display/smfile.gif"><a
href="news.html">News</a></dt>
<dt><img src="images/display/smfile.gif"><a href="abcnews.html">ABC
News RSS</a></dt>
<dt><img src="images/display/smfile.gif"><a href="bbcnews.html">BBC
News RSS</a></dt>
</ul>
<!-- repeat for "image2" "ulist2" etc. -->

where
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)
}
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"
}

The contents of the <dt></dt> tags inside "ulist1" are not relevant -
they
can be anything.

Clicking ExpandAll will expand all lists of this format.
Clicking CollapseAll will collapse all lists of this format.

Clicking the + will expand one such list
Clicking the - will collapse one such list
--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
Click to expand...
Click to expand...
Click to expand...
 
D

David Berry

If you do a "View Source" on Murray's page you'll see the code that creates
the lists. You can use this as an example or copy and paste the example
code he has on that site into your page to see how it works.

Also, you can pull up the help menu in FrontPage (F1) and type in List as
your search term. You'll see several examples that will walk you through
how to do this.

Dave

Mary Ann said:
Ok, followed the link and I'm still confused. I need this in easier terms.

--
Thanks, Mary Ann


Murray said:
Here's a quick and easy way to get expandible lists. This method solves
the
problem with FP's collapsible
list code that is NOT FF/NN compatible, and will therefore work in all
browsers.

http://www.murraytestsite.com/collapsiblelist.htm

It uses some CSS, and the FP Change Property behavior.

--
Murray
--------------
MVP FrontPage


Mary Ann said:
HI Trevor,

Thank you for the response but I'm not sure what you are saying by
sending
me this. I write very little html and I copied what you sent into my
site
but
I'm not understanding what I'm supposed to do with that.

When I go into help it's says to create the list then click format,
click
bullets, click enable collapsible outlines, click ok. I have done this
several times but it's not working. Obviously I'm doing something wrong
but I
can't figure out what.

Can someone give me step by step instructions on how to create this
list.
I
also need to make the list hyperlinks to other pages.

--
Thanks, Mary Ann


:

Mary Ann wrote:
Hello,

Recently I asked about an expand/ collapse list but received no
response. I went to help in Frontpage, followed directions but still
cannot create the list. can anyone help?

--
Thanks, Mary Ann

An example from my site - a sitemap

<a href='#' onclick="ExpandAll();return false">Expand All</a> |
<a href='#' onclick="ExpandAll('hide');return false">Collapse
All</a><br
/>
Click <img src="images/display/plus.gif" alt="" width="15"
height="15"
/>
to expand
<img src="images/display/minus.gif" alt="" width="15"
height="15"
/>
to collapse<br />

<dt><a href="#" onclick="changeVisibility(1);return false">
<img src="images/display/plus.gif" alt="" id="image1"
width="15"
height="15" /></a>
<a href="index.html" class="head4">Trevor and Carole's Home
Page</a></dt>
<ul id="ulist1">
<dt><img src="images/display/smfile.gif"><a
href="picture.html">Picture</a></dt>
<dt><img src="images/display/smfile.gif"><a
href="http://validator.w3.org/check?uri=referer">W3C Markup
Validator</a></dt>
<dt><img src="images/display/smfile.gif"><a
href="http://jigsaw.w3.org/css-validator/">W3C CSS Validator</a></dt>
<dt><img src="images/display/smfile.gif"><a
href="news.html">News</a></dt>
<dt><img src="images/display/smfile.gif"><a
href="abcnews.html">ABC
News RSS</a></dt>
<dt><img src="images/display/smfile.gif"><a
href="bbcnews.html">BBC
News RSS</a></dt>
</ul>
<!-- repeat for "image2" "ulist2" etc. -->

where
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)
}
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"
}

The contents of the <dt></dt> tags inside "ulist1" are not relevant -
they
can be anything.

Clicking ExpandAll will expand all lists of this format.
Clicking CollapseAll will collapse all lists of this format.

Clicking the + will expand one such list
Clicking the - will collapse one such list
--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
Click to expand...
Click to expand...
Click to expand...
 

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

Similar Threads

Create form with checkbox les that expand and collapse sections of the form? 0
No option to create a list in SharePoint Site 0
Weekly Report 2
collapsible lists in FrontPage 3
Collapsible List 0
Problems created by Recent updates to Outlook 365 0
Assigning a key to expand or collapse a group 2
How to get expanded or collapsed state of task 3

Top