This is a great cross-browser script. I am looking to enhance it by including a "display/hide all" link at the top of the outline. Could you help me out with how I could go about getting this to work.
Thanks
Kari
Edit: This code updated April 2nd, 05' to work with latest version of the script (namely, the state symbols "+" and "-").
Sure. Firstly, add the below function to the code of Step 1:
function sweeptoggle(ec){
var thestate=(ec=="expand")? "block" : "none"
var inc=0
while (ccollect[inc]){
ccollect[inc].style.display=thestate
inc++
}
revivestatus()
}
With that done, add the below two links somewhere within your visible HTML, which will contract/ expand the entire switch content when clicked on, respectively:
<!--Optional Expand/ Contact All links. Remove if desired-->
<div><a href="javascript:sweeptoggle('contract')">Contract All</a> | <a href="javascript:sweeptoggle('expand')">Expand All</a></div>
That's awesome, exactly what I was looking for. Thank you for your quick response.
Kari
Hi,
This question has been answered to create a "Contract All" and "Expand All" feature.
I think this was done before the (+)(-) was an added feature. It works great, but the plus (+) sign doesn't change to a minus (-) sign when I click "Expand All". The content is expanded, it's just the symbols don't change.
I tried playing with the code, but I couldn't get it.
Any help would be much appreciated.
Thank you
It seems more than a few people have requested a "Expand all" feature, so I'll look at officially updating the script for it. I'll post a heads up if the script is modified for this.
Ok, I've updated the code above to account for the latest version of Switch Content script. The same update can also be found in the official version of the script: http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm
The contact/expand links tie in with the persistence feature, so they're remembered as well. :)
Hi all. I'm not sure if anyone is still viewing this thread but I was wondering if I could get hand with something.
I use the code at the above url to have content appear on demand. I use it not only for links but for anything I'd like to hide for the mement without having to create a pop up or another page. However, my issue is that I'd like the first expandable content to be viewed right away but once someone clicks on a specified link the first one dissapears and the second appears in its place.
I'm not the most experienced at code but I was trying simply having an onLoad command in the <body> tag something like:
<body onLoad="expandcontent(this, 'sc1')">
But I didn't have any luck. I've tried putting the assignment in different tags but still no luck. Like I said, I'm far from being experienced. I was hoping that maybe someone might provide some help. It would be greatly appreciated.
Hi all. I'm not sure if anyone is still viewing this thread but I was wondering if I could get hand with something.
I use the code at the above url to have content appear on demand. I use it not only for links but for anything I'd like to hide for the mement without having to create a pop up or another page. However, my issue is that I'd like the first expandable content to be viewed right away but once someone clicks on a specified link the first one dissapears and the second appears in its place.
I'm not the most experienced at code but I was trying simply having an onLoad command in the <body> tag something like:
<body onLoad="expandcontent(this, 'sc1')">
But I didn't have any luck. I've tried putting the assignment in different tags but still no luck. Like I said, I'm far from being experienced. I was hoping that maybe someone might provide some help. It would be greatly appreciated.
Never mind! Sorry to waste everyone's time but stupid me just found the answer.
Which was...?
The "this," shouldn't be there?
Like the script,
Is there any way you can include sub headings with expandable content?
Ok, I've updated the code above to account for the latest version of Switch Content script. The same update can also be found in the official version of the script: http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm
The contact/expand links tie in with the persistence feature, so they're remembered as well. :)
Is it Possible to expand this to have sub heading also with expandable content?
:confused: What I mean is in the sites demo, could it be like this (only an example as to what I mean)?
<h2>In this section</h2>
<h3><a href="javascript:void(0)" class="dsphead"
onclick="dsp(this)"><span class="dspchar"><b>+</b></span><b> Summary of Time Sheet Codes for Leave</b></a></h3>
<div class="dspcont">
<p>You should click on the appropriate leave category for details of eligibility, entitlement, and
the application and approval process.</p>
<p> </p><centre>
<div align="center">
<table style="BORDER-RIGHT: #cccccc 1px; BORDER-TOP: #cccccc 1px; BORDER-LEFT: #cccccc 1px; BORDER-BOTTOM: #cccccc 1px; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: white"
borderColor=#cccccc cellSpacing=0 cellPadding=3 rules=all
border=1 width="303" id="table1">
<TBODY>
<tr style="FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: #006699">
<td width="194">Leave Type</td>
<td>Code</td>
</tr>
<tr>
<td width="194"><a href="#Annual_Leave">Annual Leave</a></td>
<td>600000</td>
</tr>
<tr>
<td width="194"><a href="#Graduation_Leave">Graduation Leave</a></td>
<td>600050</td>
</tr>
<tr>
<td width="194"><a href="#Jury_Service_&_Court_Attendance">Jury Leave</a></td>
<td>600070</td>
</tr>
<tr>
<td width="194">Leave in lieu of a Stat day</td>
<td>600140</td>
</tr>
<tr>
<td width="194"><a href="#Leave_In-Lieu_of_Overtime">Leave in lieu of Overtime</a></td>
<td>600130</td>
</tr>
<tr>
<td width="194">Marital Leave</td>
<td>600080</td>
</tr>
<tr>
<td width="194">Maternity leave – unpaid</td>
<td>600120</td>
</tr>
<tr>
<td width="194">Parental leave – T&T Special</td>
<td>600090</td>
</tr>
<tr>
<td width="194">Partner/paternity Leave</td>
<td>600120</td>
</tr>
<tr>
<td width="194">Personal sick leave</td>
<td>600020</td>
</tr>
<tr>
<td width="194">Bereavement Leave</td>
<td>600100</td>
</tr>
<tr>
<td width="194">Care of sick dependent</td>
<td>600030</td>
</tr>
<tr>
<td width="194">Unpaid leave</td>
<td>600010</td>
</tr>
</table></div>
</centre></div>
<h3><a href="javascript:void(0)" class="dsphead"
onclick="dsp(this)"><span class="dspchar"><b>+</b></span><b> Annual Leave</b></a></h3>
<div class="dspcont">
<p>Your annual leave entitlement is detailed in your employment agreement.</p>
<h4><a href="javascript:void(0)" class="dsphead"
onclick="dsp(this)"><span class="dspchar"><b>+</b></span><b> How do I find out my current leave balance?</b></a></h4>
<div class="dspcont">
<p>Annual leave accrues at 1/12th of your annual entitlement per month. The amount of leave that you have accrued year to
date is printed on your monthly pay slip.</p>
<p>The annual leave balance is shown in two amounts; the accrual year to
date based on the minimum 3 weeks you are entitled to under law, and the
accrual year to date based on any additional days that you may be
entitled to as per your employment agreement. Combine the two amounts
to give you a total current annual leave balance.</p></div>
<h4><a href="javascript:void(0)" class="dsphead"
onclick="dsp(this)"><span class="dspchar"><b>+</b></span><b> When can I take leave?</b></a></h4>
<div class="dspcont">
<p>Unless project or support requirements dictate otherwise, up to seven
days of the leave entitlement is usually to be taken in a shut down of
our office over the Christmas/New Year period. You will be notified of
the leave requirement early in the calendar year. The remainder of your
leave is to be taken by 31 December of the succeeding calendar year.
Leave should be taken at times mutually agreed between you and your line
manager, taking into account the operational needs that apply.</p></div>
<h4><a href="javascript:void(0)" class="dsphead"
onclick="dsp(this)"><span class="dspchar"><b>+</b></span><b> How do I apply for leave?</b></a></h4>
<div class="dspcont">
<p>Check your previous month’s pay slip to ensure that you have sufficient
leave accrued to cover the length of time you wish to be away.</p>
<p>Annual leave accrues at approximately 1/12th of your annual entitlement
per month. You may need to calculate this if you are taking leave
beyond the current month.</p>
<p>As far in advance as possible, download the
<a target="_blank" href="../../BMS/resources/hr/LeaveApplicationAndApprovalForm.pdf">Leave Application and Approval Form
</a>and submit to your manager for approval and entering on to resource schedules. Forward the approved
leave form to HR.</p></div>
<h4><a href="javascript:void(0)" class="dsphead"
onclick="dsp(this)"><span class="dspchar"><b>+</b></span><b> Can I accumulate my leave entitlement from year to year?</b></a></h4>
<div class="dspcont">
<p>Your annual leave entitlement is to be taken by 31 December of the
succeeding calendar year. Carrying leave forward to the next calendar
year is therefore an exception rather than an option, and must be
approved and in accordance with Company policy. It is possible for your
manager to request that you take leave at specific times. This may be
due to an accumulating leave balance, or operational requirements.</p></div>
<h4><a href="javascript:void(0)" class="dsphead"
onclick="dsp(this)"><span class="dspchar"><b>+</b></span><b> Am I entitled to leave if I am a casual leave?</b></a></h4>
<div class="dspcont">
<p>Instead of annual leave you are paid a proportionate holiday payment
based on the hours or days that you have worked. Generally this is paid
out to you when you cease working for T&T. Where the casual work is of
an ongoing nature, this amount is calculated and paid at the end of the
calendar year i.e.. December. You will find the details of holiday pay
and payments in your employment agreement.</p></div>
<h4><a href="javascript:void(0)" class="dsphead"
onclick="dsp(this)"><span class="dspchar"><b>+</b></span><b> Annual leave timesheet code</b></a></h4>
<div class="dspcont">
<p>Annual leave should be recorded on your timesheet as 600000.</p></div>
</div>
</body>
</html>
The script defaults to having the content expanded on first load. Is there a way to switch that so that the default is contracted? (And then cookies take care of user preferences from thereon.)
I am trying to use the the code in the following way; it works fine, until I delete the <h1> from the link. I would like to just have a plain text link to open up a form.
With the <H1> being used there is a large gap in between the link and where the bottom of the form is:
<h1>
<a href="javascript:void(0)" onclick="dsp(this)">
<font face=arial color=blue style="font-size:12"><u>Click here to enter a new note...</u></a>
</h1>
The question was asked, how to expand/contract the sections using javascript. What is the answer? I have the content working, i'd like to call a javascript function to expand or contract a section. What's the syntax?