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

Just thought I would mention how handy Firefox’s built in Error Console feature is for debugging – I mostly use this for Javascript, in fact I can;t even remember using it for anything else.

But in any case if you run into the same problems I do with Javascript this is a handy tool for catching the issue at ahnd.

To bring up your Error Console just choose Tools > Error Console from the Firefox top menu.

Then go to the page where you suspect your problem and the console will give you clues.

I have also installed Firebug add-on which looks to have a load of potential for more detailed debugging, but I haven’t really spent enough time on it yet to tell you my thoughts. I will eventually.

I learned a handy trick today. I wanted to provide an external javascript so other websites could display some info from my site, but then realized it would be way better if I could somehow have them call a php file instead. Well you can.

So the page call will look just like the typical javascript call, except we are calling a php file:

<script language=”JavaScript” type=”text/javascript” src=”http://www.yoursite.info/yourfile.php”></script>

Now since you are calling the php file this way you need to make the php file appear to be a javascript document so to do that you need to add a Header property like this:

Header(“content-type: application/x-javascript”);

Then you need to make sure your output is in javascript format, since that is what you are outputting. So lets look at an example php file might look like – you can use this to try it out:

<?
Header(“content-type: application/x-javascript”);
$testvar=”what’s up doc?”;
echo “document.write(\”Bugs Bunny says: <b>” . $testvar . “</b>\”)”;
?>

Then just call that file. Notice I am using php’s echo to write out the javascript code document.write – if were to just echo it it would not show up on the page calling the javascript.

Ok, now lets get even fancier. We can pass some parameters to our file in the page call:

<script language=”JavaScript” src=”http://www.yoursite.com/yourfile.php?var=elmerfudd&ID=4″></script>

Then you can pick up those parameters in your php file using $HTTP_GET_VARS[] and do whatever you want with them.

We have all run into the issue of having a background image as our site header but then you want to link the header to hoe page – so what do you do? You could bring the image out from the background or make an empty space into a link or you can use this handy code to make the entire <DIV> a link:

<div onclick=”location.href=’http://www.yourdomain.com’;” style=”cursor: pointer;”>

The Javascript Onclick Event can be used on all of these html tags:
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

It can also be used in conjunction with any of these Javascript objects:
button, document, checkbox, link, radio, reset, submit