You see it everywhere these days – little link that says “Show more…” and when you click it a new block of content appears. There are a million uses for this show/hide technique – I know because I have used it in a dozen different ways myself. Here is the simplest CSS and JavaScript method I have found:

JavaScript in header:

function showDiv(ID) {
if (document.getElementById(“div” + ID).className == “show”)
document.getElementById(“div” + ID).className = “hide”;
else
document.getElementById(“div” + ID).className = “show”;
return true;
}

Link to open hidden content:

<span class=”norm” onclick=”showDiv(0)”>Read more…</span>

Hidden content container:

<div id=”div0″ style=”display:none;”>Content here</div>

Often I only want a site visitor to make a single menu choice, but need their selection to populate a number of items instead of just the usual single option value. Also, I usually don’t even want them to see what their single selection has spawned such as prices changes in a shopping cart, thus eliminating just asking them for all the values.

So here is how I take advantage of using the option element’s LABEL as well as ID and TITLE to define more values.

First the form’s select pulldown menu options – note the addition of ID and TITLE tags to give us our additional values:

<option id=”Op1″ title=”01″ value=”100″>Option 1 </option>
<option id=”Op2″ title=”02″ value=”200″>Option 2 </option>
<option id=”Op3″ title=”03″ value=”300″>Option 3 </option>

Now the JavaScript that makes it happen:

<script>
function changeValues(ID,VALUE,LABEL,TITLE)
{
document.getElementById(“idvar”).value = ID;
document.getElementById(“valuevar”).value = VALUE;
document.getElementById(“labelvar”).value = LABEL;
document.getElementById(“titlevar”).value = TITLE;
}

</script>

Now to call the function, we need to add an onChange command to the select element, see how it is calling the ID, VALUE, LABEL(text) and TITLE:

<select name=”options” onChange=”changeValues(this.options[this.selectedIndex].id,
this.options[this.selectedIndex].value,this.options[this.selectedIndex].text,
this.options[this.selectedIndex].title);”>

Now here is the full code put all together:

<script language=”JavaScript”>
<!–
function changePrice(ID,VALUE,LABEL,TITLE)
{
document.getElementById(“idvar”).value = ID;
document.getElementById(“valuevar”).value = VALUE;
document.getElementById(“labelvar”).value = LABEL;
document.getElementById(“titlevar”).value = TITLE;
}

–>
</script>

<select name=”options” onChange=”changeValues(this.options[this.selectedIndex].id,
this.options[this.selectedIndex].value,
this.options[this.selectedIndex].text,
this.options[this.selectedIndex].title);”>
<option value=”100″ id=”Op1″ title=”01″>Option 1
<option value=”200″ id=”Op2″ title=”02″>Option 2
<option value=”300″ id=”Op3″ title=”03″>Option 3
</select>

ID: <input name=”idvar” id=”idvar” type=”text”>
VALUE: <input name=”valuevar” id=”valuevar” type=”text”>
LABEL: <input name=”labelvar” id=”labelvar” type=”text”>
TITLE: <input name=”titlevar” id=”titlevar” type=”text”>

(Please note that the fields you pass the values to can easily be changed to hidden type instead of text so the visitor doesn’t even see them.)

Click here to see a demo