473,804 Members | 3,259 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Collapsable content

Does anybody know how the following can be acheived using html or
xhtml?

I need to present colleagues with a 'to-do' list. Lets say the list
has ten or so jobs and each job consists of five or so steps, most
colleagues will already know how to perform a number of these jobs, so
rather than show all jobs with all steps, by default, I'd like to have
the steps for each job collapsed.

Colleagues who didn't know how to perform a particular job could click
some kind of toggle button to expand that job and view the tasks, when
done, they could click the toggle button again and have the tasks
collapsed.

It's important the tasks are expanded in-line (on the same page), i.e.
just follwing a link to another page is no good - they have to appear
together. Maybe I need to create a whole new document using XSL which
has the expanded content also?

Thanks for any ideas!

Duncan Smith.

May 4 '06 #1
6 4230
On 4 May 2006 09:07:32 -0700, "Duncan" <DS********@goo glemail.com>
wrote:
I need to present colleagues with a 'to-do' list. <snip>Colleagues who didn't know how to perform a particular job could click
some kind of toggle button to expand that job and view the tasks, when
done, they could click the toggle button again and have the tasks
collapsed.

It's important the tasks are expanded in-line (on the same page), i.e.
just follwing a link to another page is no good - they have to appear
together. Maybe I need to create a whole new document using XSL which
has the expanded content also?


Try something like this:

<html>
<head>
<script language=javasc ript>
function ToDoList(todoit em) {
if (document.all) {
thisItem = eval("document. all." + todoitem + ".style")
if (thisItem.displ ay == "block") {
thisItem.displa y = "none"
}
else {
thisItem.displa y = "block"
}
return false
}
else {
return true
}
}
</script>
<style type="text/css">
#Hold {display:none; margin-left:0px}
#Tilt {display:none; margin-left:0px}
#Drink {display:none; margin-left:0px}
</style>
</head>
<body>
<a href="#" onClick="return ToDoList('Hold' )">Step 1</a>
<br>
<span id="Hold">Hold beer mug to your mouth.</span>
<a href="#" onClick="return ToDoList('Tilt' )">Step 2</a>
<br>
<span id="Tilt">Tilt the beer mug.</span>
<a href="#" onClick="return ToDoList('Drink ')">Step 3</a>
<br>
<span id="Drink">Swal low...</span>
</body>
</html>
May 4 '06 #2
Thanks. That's pretty cool, hic, but it only seems to work with
Internet Explorer and not Firefox.

Also, for many 'to-do' lists to share common 'tasks', would it be
possible to bring in the content from another html file? In other
words, the expansion would be content from another html file but it
would appear inline (in this html file).

Cheers,

Duncan Smith.

May 4 '06 #3
On 4 May 2006 14:03:41 -0700, "Duncan" <DS********@goo glemail.com>
wrote:
Thanks. That's pretty cool, hic, but it only seems to work with
Internet Explorer and not Firefox.
Mmm. I never tried it in FireFox...
Also, for many 'to-do' lists to share common 'tasks', would it be
possible to bring in the content from another html file? In other
words, the expansion would be content from another html file but it
would appear inline (in this html file).


Put the content of each 'task' into a seperate .html page then
"include" each page into the main .htm page using an iframe:

The original example code I posted would now look something like this:

<html>
<head>
<script language=javasc ript>
function ToDoList(todoit em) {
if (document.all) {
thisItem = eval("document. all." + todoitem + ".style")
if (thisItem.displ ay == "block") {
thisItem.displa y = "none"
}
else {
thisItem.displa y = "block"
}
return false
}
else {
return true
}
}
</script>
<style type="text/css">
#Hold {display:none; margin-left:0px}
#Tilt {display:none; margin-left:0px}
#Drink {display:none; margin-left:0px}
</style>
</head>
<body>
<a href="#" onClick="return ToDoList('Hold' )">Step 1</a>
<br>
<span id="Hold">
<iframe scrolling=No frameborder=0 marginheight=0 marginwidth=0
width=350 height=50 SRC="content1.h tm"></iframe>
</span>
<a href="#" onClick="return ToDoList('Tilt' )">Step 2</a>
<br>
<span id="Tilt">
<iframe scrolling=No frameborder=0 marginheight=0 marginwidth=0
width=350 height=50 SRC="content2.h tm"></iframe>
</span>
<a href="#" onClick="return ToDoList('Drink ')">Step 3</a>
<br>
<span id="Drink">
<iframe scrolling=No frameborder=0 marginheight=0 marginwidth=0
width=350 height=50 SRC="content3.h tm"></iframe>
</span>
</body>
</html>

Obviosuly you'd have to adjust the sizes of the iframes according to
the size of your content...

Then create a .htm page for each of your "topics":

Content page 1:
<html>
<body>
<p>Your content for item 1 goes in this .htm page...</p>
</body>
</html>

Content page 2:
<html>
<body>
<p>Your content for item 2 goes in this .htm page...</p>
</body>
</html>

Content page 3:
<html>
<body>
<p>Your content for item 3 goes in this .htm page...</p>
</body>
</html>

May 5 '06 #4
On 4 May 2006 09:07:32 -0700, in comp.infosystem s.www.authoring.html ,
"Duncan" <DS********@goo glemail.com> in
<11************ **********@j73g 2000cwa.googleg roups.com> wrote:
Does anybody know how the following can be acheived using html or
xhtml?

I need to present colleagues with a 'to-do' list. Lets say the list
has ten or so jobs and each job consists of five or so steps, most
colleagues will already know how to perform a number of these jobs, so
rather than show all jobs with all steps, by default, I'd like to have
the steps for each job collapsed.

Colleagues who didn't know how to perform a particular job could click
some kind of toggle button to expand that job and view the tasks, when
done, they could click the toggle button again and have the tasks
collapsed.

It's important the tasks are expanded in-line (on the same page), i.e.
just follwing a link to another page is no good - they have to appear
together. Maybe I need to create a whole new document using XSL which
has the expanded content also?

Thanks for any ideas!


Try Accordion: http://openrico.org/rico/demos.page?demo=rico_accordion
--
Matt Silberstein

Do something today about the Darfur Genocide

http://www.beawitness.org
http://www.darfurgenocide.org
http://www.savedarfur.org

"Darfur: A Genocide We can Stop"
May 8 '06 #5
Thanks, that's a good nudge in the right direction.

May 18 '06 #6
Once upon a time *Duncan* wrote:
Thanks, that's a good nudge in the right direction.


Huh? What and who are you talking about?

How to quote: http://www.netmeister.org/news/learn2quote.html#toc2
From Google: http://www.safalra.com/special/googlegroupsreply/

Google Group Users, read about The Usenet Improvement Project:
http://blinkynet.net/comp/uip5.html

--
/Arne

Proud User of SeaMonkey. Get your free copy:
http://www.mozilla.org/projects/seamonkey/
May 18 '06 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
1420
by: news | last post by:
Is there a way to write an XML doc so that you can still format the text, bold and whatnot, and still have it display in a collapsable tree format? Here's what I'm using as a test: <?xml version="1.0" encoding="iso8859-1"?> <?xml-stylesheet type="text/css" href="xml-style.css"?> <result> <date>2005-05-19
0
1170
by: Steve | last post by:
Visual Studio 2003 .NET / C# My current application has a Treeview control down the left hand edge permanently, and this object acts as my main menu controller. What I want though is for this to be a collapsable menu object, like what you get in Visual Studio with the Solution Explorer when you toggle AutoHide. Is this possible? Thanks
3
1413
by: The Bear | last post by:
Is there a way to create a collapsable datagrid. Where multiple areas of the grid can be expanded or collapsed? Using C# and Windows Forms
1
1399
by: Brian Henry | last post by:
How do you make a collapsable list in html? I remember doing it in the past but cant remember how exactly to.. thanks!
7
1466
by: Rlrcstr | last post by:
How would one implement collapsable paragraphs of text in an HTML page? I want the sections of the document to be expandable for full text or collapsed into just the section heading. Any help is appreciated. Jerry
1
2478
by: t f | last post by:
Hi Is there a collapsable panel available in c#, e.g. like the toolbox / solution explorer etc... Or would one have to develop one? thanks t f
12
1315
by: Mark | last post by:
Hi I'm looking to create a colapsable list like what we see in a news reader or on a forum. - Basically, any number of levels up to 10 (i.e. more than whats likely to be needed) - Able to expand/collapse each branch independantly
4
1329
by: cleary1981 | last post by:
Hi, I am using php to generate an xml file with information from my database. What I want to do is style xml into an expandable collapsable table where the user will only see the childnodes if they click on the parent node. <?xml-stylesheet href='completeproject.css' type='text/css'?> <companies> <company id='PORTASILO'> <project id='00001'> <project_name>LAFARGE</project_name>
0
9572
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10070
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7608
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6845
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5508
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5639
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4282
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3803
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2978
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.