Expand list when clicking on text

[maadretny]

You could use document.getEle mentsByTagName( "ul") to get all lists. Then loop over them to hide/show them.

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

[Rabbit]

You can't do this with just HTML, you'll have to learn javascript.

[maadretny]

What would the javascript look like?

[Rabbit]

It would toggle the visibility of the divs using the on click event.

[maadretny]

Could you send me an example of the code?

[Rabbit]

Sorry, I don't do that. Make an attempt and then we can guide you along with any errors you run into.

[maadretny]

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="JavaS cript" type="text/javascript">
<!-- Copyright 2005, Sandeep Gangadharan -->
<!-- For more free scripts go to http://www.sivamdesign.com/scripts/ -->
<!--
if (document.getEl ementById) {
document.writel n('<style type="text/css"><!--')
document.writel n('.texter {display:none} @media print {.texter {display:block; }}')
document.writel n('//--></style>') }

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



<!-- Body Code -->



<!-- HTML frag_12 -->

<!--Preamble-->
<div id="frag_12" style="position :absolute;left: 50px;top:330px; width:637px;hei ght:400px; text-align:left; /*MainDivStyle*/" __AddCode="here ">
<div onClick="openCl ose('a1')" style="cursor:h and; 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="openCl ose('a2')" style="cursor:h and; 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.<b r />
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="openCl ose('a3')" style="cursor:h and; cursor:pointer" ><b>3] Item 3:</b></div>
<div id="a3" class="texter">
Item 3 text.<br /><br />
</div>

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

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

</div>
<!--Postamble-->

[Rabbit]

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

[maadretny]

I apologize for the lack of code tags. And I thank you for your help!

[Rabbit]

Not a problem. Good luck.