473,378 Members | 1,578 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,378 software developers and data experts.

Expand list when clicking on text

@acoder
I'm not a programmer, so hope someone can help me. I need to get a lot of information on a web page and want to make it so a list can be expanded when clicking on the text, then collapsed again.

What would the HTML code be for something like this...
1. Click here for list
a. first item
b. second item
c. third item

2. Do this action
a. first do this
b. then do this

But when the page loads, you only see
1. Click here for list
2. Do this action

Does my question make sense? Can someone help me? It needs to be HTML code.

Thanks so much.
Marty
Jan 22 '12 #1
9 2579
Rabbit
12,516 Expert Mod 8TB
You can't do this with just HTML, you'll have to learn javascript.
Jan 22 '12 #2
What would the javascript look like?
Jan 22 '12 #3
Rabbit
12,516 Expert Mod 8TB
It would toggle the visibility of the divs using the on click event.
Jan 23 '12 #4
Could you send me an example of the code?
Jan 23 '12 #5
Rabbit
12,516 Expert Mod 8TB
Sorry, I don't do that. Make an attempt and then we can guide you along with any errors you run into.
Jan 23 '12 #6
Okay - one thing I am good at is web searching. I found a code that will work, but I need some help with formatting. There are several levels that I need to display. The website-building program I use helps me with the code too. I will attach it all here.

There should be a Title before this list starts, but I wasn't sure where or how to put that in.

Is there a way to format the text so that it appears indented, hanging indent?

I appreciate any help you can give.

<!-- Header Code -->

<script language="JavaScript" type="text/javascript">
<!-- Copyright 2005, Sandeep Gangadharan -->
<!-- For more free scripts go to http://www.sivamdesign.com/scripts/ -->
<!--
if (document.getElementById) {
document.writeln('<style type="text/css"><!--')
document.writeln('.texter {display:none} @media print {.texter {display:block;}}')
document.writeln('//--></style>') }

function openClose(theID) {
if (document.getElementById(theID).style.display == "block") { document.getElementById(theID).style.display = "none" }
else { document.getElementById(theID).style.display = "block" } }
// -->
</script>



<!-- Body Code -->



<!-- HTML frag_12 -->

<!--Preamble-->
<div id="frag_12" style="position:absolute;left:50px;top:330px;width :637px;height:400px; text-align:left; /*MainDivStyle*/" __AddCode="here">
<div onClick="openClose('a1')" style="cursor:hand; cursor:pointer"><b>A. Conduct a feasibility study</b></div>
<div id="a1" class="texter">
1. Familiarize key personnel, e.g., staff, administration, professional consultation group, with ACPE organization, ACPE Standards 2010, Accreditation Manual 2010.<br />
2. Discuss rationale and objectives for CPE program at the center.<br />
3. Determine administrative structure and support needed to meet ACPE standards and center's capacity to meet them.<br />
4. Develop curriculum based on ACPE standards (See ACPE Standards 309-319; Appendix 5, p. 66).<br />
5. Survey and assess clinical and educational resources.<br />
6. Draft and discuss policies and procedures needed for function of CPE programs.<br />
7. Assess overall potential for compliance with ACPE standards for each specific CPE program.<br />
8. Assess strengths and limitations of proposed center and each CPE program, identifying unique qualities of the center and the educational programs and including limitations.<br />
9. Draft student handbook for the program(s) (See Appendix 5 Part I, p. 66).
<br /><br />
</div>

<div onClick="openClose('a2')" style="cursor:hand; cursor:pointer"><b>B. Request a site visit for approval as Candidacy center</b></div>
<div id="a2" class="texter">
1. The Center submits an Accreditation Review Request and Face Sheet (Appendix 3, p. 64) to the Accreditation Commission Chair, with copies to the regional accreditation committee chair and ACPE office, and pay invoice if applicable.<br />
2. Receive documentation of all fees paid and center in good financial standing from ACPE and region.<br />
3. Send copies of required materials (refer to checklist for each accreditation process) to all members of the site team at least 30 days (postmarked) prior to the site visit.<br />
4. Site visit team assesses completeness of materials, requests any missing information, and assesses readiness of the center for a site visit.<br />
5. Supervisor and site visit team chair develop tentative schedule for the visit (usually one to two days) 30 days prior to visit.<br />
6. Site visit team, composed of a chair and two or more site visitors, conducts on-site review:<br />
a. Team meets with CPE supervisor(s), other chaplaincy staff, professional advisory group, administrator responsible for CPE, students, other key persons involved in the program - some in groups and others individually.<br />
b. Team reviews on site documentation, files, etc.<br />
c. Team meets to discuss findings.<br />
d. Site visit team meets with supervisor and key center personnel to summarize tentative conclusions.<br />
e. Commendations require the final action of the Commission; therefore proposed commendations shall not be shared with anyone at the center.<br />
7. Site visit team provides Site Visit Report Part I, preliminary report of findings, to center no later than 30 days (postmarked) after the visit.<br />
8. Center submits written response to the report to the entire site team no later than 30 days (postmarked) after receiving the report; center may append additional documentation, corrected materials, other evidence of compliance with any standard in question.<br />
9. Site visit team provides Site Visit Report Part II, the team's final report, and recommendations to the center and to the ACPE Accreditation Commission Chair no later than 30 days (postmarked) after receiving the center's response.<br />
10. Site team proposes any commendations that may be appropriate for the center.<br />
11. Site team chair forwards a complete set of materials from the center's accreditation process to the Commission.<br />
12. Center completes and submits Accreditation Process Evaluation (Appendix 8, p.95), within 30 days (postmarked) of receipt of form from ACPE.<br />
13. Regional policy determines how expenses for site team are paid.<br />
<br />
</div>

<div onClick="openClose('a3')" style="cursor:hand; cursor:pointer"><b>3] Item 3:</b></div>
<div id="a3" class="texter">
Item 3 text.<br /><br />
</div>

<div onClick="openClose('a4')" style="cursor:hand; cursor:pointer"><b>4] Item 4:</b></div>
<div id="a4" class="texter">
Item 4 text.<br /><br />
</div>

<div onClick="openClose('a5')" style="cursor:hand; cursor:pointer"><b>5] Item 5:</b></div>
<div id="a5" class="texter">
Item 5 text.<br /><br />
</div>

</div>
<!--Postamble-->
Jan 24 '12 #7
Rabbit
12,516 Expert Mod 8TB
Please use code tags when posting code.

You can use the margin-left style to indent the items in the div that you want to indent. You can find an example here http://www.w3schools.com/css/css_margin.asp
Jan 24 '12 #8
I apologize for the lack of code tags. And I thank you for your help!
Jan 25 '12 #9
Rabbit
12,516 Expert Mod 8TB
Not a problem. Good luck.
Jan 25 '12 #10

Sign in to post your reply or Sign up for a free account.

Similar topics

0
by: Tallgeese | last post by:
We developed an in-process COM object for our own application. A toolbar button is used to activate the COM object. But when the COM object loaded, the HTML help hang when clicking the "List...
3
by: Andrew Wrigley | last post by:
Hi I have what seems a corruption of an mdb that is not solved by the decompile command line trick. The problem appears when clicking on a subform control (check box) that has a event handler...
0
by: jeff | last post by:
is there a way to display an hourglass for the client's cursor when clicking a button running server-side code? thanks.
4
by: James Brett | last post by:
I have one form on the page but have multiple submit buttons for different elements. When clicking on a button not associated with the required elements the validator popup still comes up. How...
1
by: Li Pang | last post by:
Hi, I'd like to know the easiest way to get a row number when clicking on a listview. Thanks
0
by: karups | last post by:
hi, Can some one help me out? How to Force file download box when clicking on a link for a .pdf file. Normally it opens the pdf in IE itself, instead it should ask for (open , save and...
2
by: André | last post by:
Hi, I made a detailsview containing several fields for inserting only. I also made a dropdownlist which is invisible at start. Now, when clicking in a particular textbox, the dropdownlist must...
1
by: karups | last post by:
Hi I have binded a dataset to my datagrid. Datagrid is present inside a >DIV></DIVtag of specific height. Only 5 records will be visible at a time when i edit the 10th record, the page...
2
by: polluxsoftech | last post by:
i want to enter text in textbox by dropdown only when clicking on button i want that all this perform at client side by javascript.. this is dont in apsx page but i want it in .ascx this is...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 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 former...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

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.