By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,466 Members | 1,141 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,466 IT Pros & Developers. It's quick & easy.

Expand list when clicking on text

P: 5
@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
Share this Question
Share on Google+
9 Replies


Rabbit
Expert Mod 10K+
P: 12,430
You can't do this with just HTML, you'll have to learn javascript.
Jan 22 '12 #2

P: 5
What would the javascript look like?
Jan 22 '12 #3

Rabbit
Expert Mod 10K+
P: 12,430
It would toggle the visibility of the divs using the on click event.
Jan 23 '12 #4

P: 5
Could you send me an example of the code?
Jan 23 '12 #5

Rabbit
Expert Mod 10K+
P: 12,430
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

P: 5
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
Expert Mod 10K+
P: 12,430
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

P: 5
I apologize for the lack of code tags. And I thank you for your help!
Jan 25 '12 #9

Rabbit
Expert Mod 10K+
P: 12,430
Not a problem. Good luck.
Jan 25 '12 #10

Post your reply

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