View Full Version : Switch Content Script Question

02-16-2006, 02:08 AM
Does anyone know a way to change this script to have seperate functions for expanding and contracting content? I'm very new to JS so I don't know how to change this on my own.

02-16-2006, 10:38 AM
To what end? Please explain what you are trying to do more thoroughly.

Warning: Please include a link to the DD script in question in your post.
PLEASE: Include the URL to your problematic webpage that you want help with.

02-26-2006, 01:52 AM
I *hope* this bumps the thread, haven't checked it in a few weeks...

What I'm looking for is a simple (hopefully) modification--or new script--that could create seperate functions to hide and unhide a <div>.

Presently, the script has one function, expandcontent, that either hides or shows the content. This is fine for simple use, however, when trying to make a form that's cross-browser compatable, it's not adequate.

How I have it set up now is a user has a choice of two radio buttons. The first is "email" the second is "address". The default selected choice is "email". If a user clicks on "address", it hides the email form, and shows the address form. The problem is that to support all browsers, I have to use the onClick= function in javascript. This is obviously the worst choice, because if a user clicks, for example, "address" twice, it shows the email form with the address radio box selected.

I have to use radio boxes or a drop down select form for this, because that determines where in my database items are written. It also is used for error checking.

So what I'd like is to be able to have one radio box be onClick="javascript:expand('<div id>'); collapse('<other div id>')", and the other be onClick="javascript:expand('<other div id>'); collapse('<div id>'). This way if a user clicks on the same radio box twice, the correct form is still being shown.

I would also be able to use this for the "Reset Form" button, because as it is, resetting a form does not correctly switch to the appropriate form field, though it does change radio box selection.

I hope this makes sense.


http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm is a link to the script.

I can't show the page i'm having problems on because it's on my laptops webserver--not connected to the net, just networked to my pc.

02-28-2006, 07:42 AM
After looking at your page, I finally see what you are talking about. There is a slight problem with your markup. Even though it seems to create no problems, using an id of '1' and another of '2' for the two content divisions is not according to spec. Element id's should begin with letters, not numbers. So, I changed the 'Hard Copy' division's id to 'hc' and the 'Email's to 'em'. You will need to do the same, for the below modifications to work with your markup. Now, to get the effect you are after, first change this configuration in the script to yes, as shown below (it is near the top of the script):

var collapseprevious="yes" //Collapse previously open content when opening present? (yes/no)

Next, use these for your onclick events of the radio buttons:

<input tabindex="11" type="radio" name="hs" value="hard" onclick="if (document.getElementById('hc').style.display=='none')expandcontent('hc');"> Hard Copy <input checked tabindex="3" type="radio" name="hs" value="email" onclick="if (document.getElementById('em').style.display=='none')expandcontent('em');"> Email

Remember to change the corresponding id's in the divisions below that ('1' becomes 'em' and '2' becomes 'hc') and you will be all set.