Display multiple form fields

[doodlebee]

I wanted to re-open an old thread, but I guess it's *too* old, and I have to start anew. The old thread is here [webmasterworld.com], in case anyone wants to see it. The issue I'm having is pretty much the same (only one slight difference), and the solution I'm using worked for *that* problem - but because of my "slight difference" in my current issue, it's no longer working.

The difference is this: instead of opening and closing *one* field (based on a dropdown selection), I need four selections, and each selection will cause a different div to show itself. In the previous issue, I only had two options, and one would show or hide itself based on which you chose.

So I'm going to put in snippets of my code here, and if someone can help me figure out how to fix this, I'd really appreciate it.

My HTML form is as such:

<div class="form_field clear">
<?php if ($inquiry_error == "1") { echo "<small class=\"error\">You must choose an option for your email type.</small>"; }?>
<span class="fieldname"><span class="required">*</span> Nature of Inquiry:</span>
<select class="form" name="inquiry" onchange="showhide(id);">
<?php if (isset($_POST['inquiry'])) echo '<option selected>'.(($_POST['inquiry'])).'</option>';?>
<option class="select_option" value="">Please choose an option.</option>
<option value="general">General Information</option>
<option value="service">Service Request</option>
<option value="supply">Supply Order</option>
<option value="meter">Meter Read Request</option>
</select>
</div>

<div id="general_info">
This option will display general information.
</div>

<div id="service_req">
This is for a service request.
</div>

<div id="supply_order">
This is to place a supply order.
</div>

<div id="meter_read">
This is to request a meter read.
</div>

the bolded area is where I *know* I'm having an issue. Right now, it's set to "general_info", but it's been all kinds of other things before to try and get this to work. I've also tried placing the "onchange" stuff in the <option> tags, but that didn't work either (and I figured it wouldn't, 'cause that doesn't make sense anyway - but it was worth a shot).

The javascript code is as such:

function show(id) {
var e = document.getElementById(id);
if(e && e.style.display!= "block") {
e.style.display = "block";
}
}

function hide(id) {
var e = document.getElementById(id);
if(e && e.style.display!= "none") {
e.style.display = "none";
}
}

function showhide(id) {
var idx = document.contact.inquiry.selectedIndex;
var opt = document.contact.inquiry.options;

if( opt[idx].value == "general") show(id);
else if( opt[idx].value == "service") show(id);
else if( opt[idx].value == "supply") show(id);
else if( opt[idx].value == "meter") show(id);
else hide(id);
}

again, the bolded area is where I *know* I'm messing up. It's got to be this part where I'm screwing it up. when it worked (on the other form, where it's a choice from only two options), that section looked like so:

if( opt[idx].value == "general") show(id);
else hide(id);

Could anyone give me a hand in fixing this? PHP I can figure out, no prob. But javascript/AJAX still has me quite stumped.

[doodlebee]

Okay - I got it. However, now I'm stumped because the script will open only by ID, not by class. Would anyone know how to convert this bitty piece of code so that it'll elementClass rather than elementId?

var current = null; // points to the currently selected div
function toggle(elementId)
{
if(current!= null) {
current.style.display = "none"; // hide the previous div
}
if(elementId == 0)
{
return;
}

current = document.getElementById(elementId); // update the current div
current.style.display = "block";
}