Let’s say you have the following 2D associative array in PHP of fruits and their corresponding prices and you want to have them sorted by price:

$fruits = array
(
    [0] => array
        (
            ['product'] => 'banana',
            ['price']     => 2.99
        ),
    [1] => array
        (
            ['product'] => 'apple',
            ['price']     => 1.99
        ),
    [2] => array
        (
            ['product'] => 'durian',  //these smell by the way - i do not know how people can like them =)
            ['price']     => 19.99
        ),
    [3] => array
        (
            ['product'] => 'starfruit', //not too stinky but still stinky nonetheless
            ['price']     => 5.99
        )
);

The answer to this one involves the use of the PHP function, usort, which allows users to define their own comparison function for sorting arrays of all shapes and sizes.

For this example, our function would need to be defined as the following if we wanted to have the prices descending:

function sortDescending ($a, $b)
{
    if ($a['price'] == $b['price']) {
        return 0;
    }
    return ($a['price'] > $b['price']) ? -1 : 1;
}

Here is the slightly different version of the function for an ascending sort:

function sortAscending ($a, $b)
{
    if ($a['price'] == $b['price']) {
        return 0;
    }
    return ($a['price'] < $b['price']) ? -1 : 1;
}

To put it all together in a descending sort, we have the following:

function sortDescending ($a, $b)
{
    if ($a['price'] == $b['price']) {
        return 0;
    }
    return ($a['price'] > $b['price']) ? -1 : 1;
}
usort($fruits, "sortDescending");
 
foreach ($fruits as $fruit) {
    echo $fruit['product'] . ": " . $fruit['price'] . "\n";
}

This would give us the following output:

durian: 19.99
starfruit: 5.99
banana: 2.99
apple: 1.99


The savings percentage will change dynamically according to the values placed into the MSRP and sales price inputs. The initial 50% percent value was hardcoded in this case to save time but the value will change accordingly.


Here is the plain HTML:

1
2
3
4
5

<label for="msrp">MSRP</label><input type="text" id="msrp" name="msrp" size="5" value="200" onkeyup="calculatePercentage(this.value, document.getElementById('newprice').value)">
<br/>
<label for="newprice">Sale Price</label><input type="text" id="newprice" name="newprice" size="5" value="100" onkeyup="calculatePercentage(document.getElementById('msrp').value, this.value)">
<br/>
<div><strong>You have saved</strong> <span id="results" style="color: green; font-size: 1.5em;">50</span> <strong>%</strong></div>

Lines 1 and 3 is where all the action is. The JavaScript function, calculatePercentage, is executed everytime the onkeyup even listener fires and passes the MSRP and Sale Price arguments. As you probably know already, the onkeyup event occurs everytime a keyboard key is released. That is how we are constantly calculating and updating the percent savings.

Here is the JavaScript code for calculatePercentage:

1
2
3
4

function calculatePercentage (oldval, newval) {
    percentsavings = ((oldval - newval) / oldval) * 100;
    document.getElementById("results").innerHTML = Math.round(percentsavings*100)/100;
}

This is a very simple percentage calculation function that places the results, that have been rounded to 2 decimal places, into the results div. For the sake of brevity, there is no validation for the user input but the function will return NaN (Not a Number) if it is not able to calculate a percentage.

<a href="javascript: void(0);" onclick="dosomething();">click me</a>

I honestly did not write this one but I will leave names out of this to protect the innocent =)

The void(0) JavaScript code is usually used to prevent loading or reloading of the page when the user clicks the link.

What we were trying to do here was have the dosomething JavaScript function execute when a user clicks on the link. This works fine in FireFox, Chrome, Safari but not IE. When a user clicks on the link in IE, nothing happens: i.e. (no pun intended) the JavaScript does not execute.

It took us a good amount of time to realize what the issue was with IE. It turns out that the void(0) function was preventing the onclick event to fire.

Although it may not be pretty, this is what we ended up doing and it appears to be cross-browser friendly:

<a href="<?=$_SERVER['PHP_SELF'];>#" onclick="dosomething();">click me</a>

Anyway, I hope this helps someone out there in the universe.

1
2
3

SELECT * 
FROM my_table
ORDER BY RAND()

RAND() returns a random floating-point value but functions to randomly order the selection of rows in the above usage.

If you combine the query with LIMIT, you will end up with a random selection of rows from your table.

1
2
3
4

SELECT * 
FROM my_table
ORDER BY RAND()
LIMIT 3

Assuming you have more than 3 rows in your table, you will always get 3 random rows from the query.

1
2
3
4

$res = mysql_query("SELECT date FROM times;");
while ( $row = mysql_fetch_array($res) ) {
   echo $row['date'] . "<br />";
}

This date format that is in the output is in the timestamp format, 2008-10-05 21:34:02, which is not surprising, but you want something that is more “user-friendly” or “readable” as in “9:34 pm October 5, 2008.”

Let’s go back to the drawing board and try again:

1
2
3
4

$res = mysql_query("SELECT date FROM times;");
while ( $row = mysql_fetch_array($res) ) {
   echo date("g:i a F j, Y ", strtotime($row["date"])) . "<br />";
}

A sample output from this PHP code would be 9:34 pm October 5, 2008 which is much more user-friendly.

The PHP strtotime function parses the MySQL timestamp into a Unix timestamp which can be utilized for further parsing or formatting in the PHP date function.

Here are some other sample date output formats that may be of practical use:

1
2
3
4
5
6

echo date("F j, Y g:i a", strtotime($row["date"]));                  // October 5, 2008 9:34 pm
echo date("m.d.y", strtotime($row["date"]));                         // 10.05.08
echo date("j, n, Y", strtotime($row["date"]));                       // 5, 10, 2008
echo date("Ymd", strtotime($row["date"]));                           // 20081005
echo date('\i\t \i\s \t\h\e jS \d\a\y.', strtotime($row["date"]));   // It is the 5th day.
echo date("D M j G:i:s T Y", strtotime($row["date"]));               // Sun Oct 5 21:34:02 PST 2008

Here is the MySQL query that would do just the job.

SELECT person,
SUM(IF(vote = "yes", 1,0)) AS `yes_votes`,
SUM(IF(vote = "no", 1,0)) AS `no_votes`,
COUNT(vote) AS `total`
FROM votes
GROUP BY person
ORDER BY yes_votes DESC


The following would be the result of the query:

The beauty of the query all lies in the SUM IF statements. For example, in order to count the yes votes, the IF statement will check to see if vote = “yes” as it loops through all the rows. If so, the yes_votes column alias is incremented by 1. The same procedure goes for counting the no votes. The COUNT statements keeps a tally on the total number of votes. The GROUP BY person statement allows the vote counters to calculate the numbers by person instead of the total number of yes and no votes.

Now, you do not have to loop through your MySQL results to count column values =)

Here is the HTML code:

1
2
3
4
5
6
7

<div id="parentDiv" style="background-color: green;padding:10px;">
    green box
    <div id="yellowBox" style="background-color: yellow;padding:10px;">
        yellow box
    </div>
</div>
<input type="button" value="Remove the yellow box" onClick="var answer = confirm('Are you sure you want to remove the yellow box?'); if (answer) { removeYellowBox(); }">

The magic is in line 7 where we use confirm to ask a user if he or she really wants to delete our yellow box and retrieves the returned value and saves it in the answer variable. We then test if the answer variable is true and, if so, execute the removeYellowBox function.

In addition to the confirm function, JavaScript also has another built-in function called prompt which prompts the user for input.

Here is the HTML:

1

<input type="button" value="prompt user" onClick="var answer = prompt('What is your favorite OS?', 'OSX'); alert('You said ' + answer + '!');"

The prompt function will take 2 arguments: the string text for the user to see in the dialog box and the default value for the input. It also returns the user’s input which we have nicely saved into our answer variable.

Here is the HTML code. It’s just a series of embedded div elements with different names and the input button where we start to traverse up the DOM tree accessing each parent node and asking for it’s name attribute value. The onClick event of the button triggers the findParentNode and passes the name of the element we are looking for and the object itself which, in this case, is the button. This is the starting point where we will begin traversing up the DOM tree by accessing the parent nodes of each element and seeing if the name attribute matches what we are looking for.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div name="notMe" style="padding:10px;border:1px solid green;">
My name is <b>notMe</b>
    <div name="itsMe" style="padding:10px;border:1px solid blue;">
    My name is <b>itsMe</b>
        <div name="notMeEither" style="padding:10px;border:1px solid red;">
        My name is <b>notMeEither</b>
            <div name="tryAgain" style="padding:10px;border:1px solid purple;">
            My name is <b>tryAgain</b>
                <div name="sorryNotMe" style="padding:10px;border:1px solid black;">
                My name is <b>sorryNotMe</b>
                    <div name="nopeSorry" style="padding:10px;border:1px solid brown;">
                    My name is <b>nopeSorry</b>
                        <input type="button" value="Find Parent Object with name=itsMe" onClick="findParentNode('itsMe', this);">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Here is the findParentNode JavaScript code:

1
2
3
4
5
6
7
8
9
10
11

function findParentNode(parentName, childObj) {
    var testObj = childObj.parentNode;
    var count = 1;
    while(testObj.getAttribute('name') != parentName) {
        alert('My name is ' + testObj.getAttribute('name') + '. Let\'s try moving up one level to see what we get.');
        testObj = testObj.parentNode;
        count++;
    }
    // now you have the object you are looking for - do something with it
    alert('Finally found ' + testObj.getAttribute('name') + ' after going up ' + count + ' level(s) through the DOM tree');
}

In line 2, we access the parent node of the child element via the parentNode method which is the first div above the button named nopeSorry. We then begin a count of the number of times we traversed up the DOM tree and set it to 1 because we have already accessed the parent node once. The while loop will test if the name of the current node will match the name that we are looking for. If not, it moves up the DOM tree by accessing the next parent node and continues to look for the right name while increasing the count by 1 each time. Once it finds the right node, the function exits the while loop and alerts the node name along with the number of times it traversed up the DOM tree.

If you do not know the name of the parent element you are looking for you can also search using the tagName method. The tagName will return the value of the tag name of the given node such as A or DIV.

Here is the plain HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<form name="thisForm">
I like to program in:<p>
<input type="checkbox" value="PHP" CHECKED>PHP<p>
<input type="checkbox" value="Perl">Perl<p>
<input type="checkbox" value="Ruby">Ruby<p>
<input type="checkbox" value="ASP">ASP<p>
<hr>
I like to eat:<p>
<input type="radio" value="Snickers" name="candy" CHECKED>Snickers<p>
<input type="radio" value="Hershey's" name="candy">Hershey's<p>
<input type="radio" value="M&M's" name="candy">M&M's<p>
<input type="radio" value="Nerds" name="candy">Nerds<p>
<hr>
I like to drink:<p>
<input type="radio" value="Coke" name="drink" CHECKED>Coke<p>
<input type="radio" value="Gatorade" name="drink">Gatorade<p>
<input type="radio" value="Pepsi" name="drink">Pepsi<p>
<input type="radio" value="Milk" name="drink">Milk<p>
<br>
<input type="button" value="Submit" onclick="loopForm(document.thisForm);"> 
</form>
<p>
<div id="cbResults"></div>
<div id="radioResults"></div>

As usual, there is not too much action going on here. It is just a plain form with some checkboxes and 2 radio button groups called candy and drink. Radio buttons with the same name will be grouped and allows the users to only select one option out of the entire group. The submit button will launch the loopForm JavaScript function and the myForm DOM object is passed over as an argument. There are also 2 divs in lines 23-24 where are checkbox and radio button results will be posted. Now, on to more exciting things.

Here is the JavaScript code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function loopForm(form) {
    var cbResults = 'Checkboxes: ';
    var radioResults = 'Radio buttons: ';
    for (var i = 0; i < form.elements.length; i++ ) {
        if (form.elements[i].type == 'checkbox') {
            if (form.elements[i].checked == true) {
                cbResults += form.elements[i].value + ' ';
            }
        }
        if (form.elements[i].type == 'radio') {
            if (form.elements[i].checked == true) {
                radioResults += form.elements[i].value + ' ';
            }
        }
    }
    document.getElementById("cbResults").innerHTML = cbResults;
    document.getElementById("radioResults").innerHTML = radioResults;
}

This function loops through all the elements in the form that was passed over to the function.

If the element is of checkbox type and it is checked, the value of this element will be appended to our cbResults variable which is keeping track of our checkbox results.

If the element is of radio type and it is checked, the value of this element will be appended to our radioResults variable which is keeping track of our radio button results.

After all the looping is finished, the results are cbResults and radioResults are inserted into the cbResults div and radioResults div respectively.

This is a simple example of implementing a calculator with JavaScript and HTML. This calculator will only have the division, multiplication, addition, and subtraction operators but you can easily tack on more functions if needed.

Here is the html code including the CSS stuff:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<style type="text/css">
table.calc {
     border: 2px solid #0034D1;
     background-color: #809FFF;
}
input.calc {
     width: 100%;
     margin: 5px;
}
</style>
<fieldset>
<legend>Demo</legend>
<table class="calc" cellpadding=4>
<tr><td colspan=3><input class="calc" id="screen" type="text"></td></tr>
<tr>
<td><input class="calc" type="button" value=1 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=2 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=3 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value='/' onclick="pushButton(this.value);"></td>
</tr>
<tr>
<td><input class="calc" type="button" value=4 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=5 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=6 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value='*' onclick="pushButton(this.value);"></td>
</tr>
<tr>
<td><input class="calc" type="button" value=7 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=8 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=9 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value='-' onclick="pushButton(this.value);"></td>
</tr>
<tr>
<td><input class="calc" type="button" value=0 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value='.' onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value='C' onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value='+' onclick="pushButton(this.value);"></td>
</tr>
<tr><td colspan=3><input class="calc" type="button" value='=' onclick="calculate(document.getElementById('screen').value);"></td></tr>
</table>

Most of the HTML is coding for all the input buttons and their associated onclick event handlers. All the buttons, except for the = button, will call the pushButton JavaScript when clicked and passes it’s associated value. The = button calls the calculate JavaScript function and passes the value that is in the text input which represents the string of numbers and operators that were pushed. The rest of the HTML is just icing on the cake so that it actually looks like a calculator.

Here is the JavaScript code for the 2 functions:

1
2
3
4
5
6
7
8
9
10
11
12

function pushButton(buttonValue) {
     if (buttonValue == 'C') {
          document.getElementById('screen').value = '';
     }
     else {
          document.getElementById('screen').value += buttonValue;
     }
}
function calculate(equation) {
     var answer = eval(equation);
     document.getElementById('screen').value = answer;
}

The pushButton function does 2 things for us. If the user clicks on the C button or the clear button, it accesses the text input object, which represents our calculator screen, via the DOM . Once it is accessed, the value inside the text input is set to ” (2 single quotes) which is an empty string. This will basically remove whatever string is already inside the text input. If the user clicks on any other button, the function will access the text input object and append the value that was passed over to whatever is already in our text input. This allows us to build our string with numbers and operators.

The calculate function does exactly what it’s name suggests. It takes our string of numbers and operators and evaluates it in line 10. The eval() function treats the string as if it were JavaScript code and executes it and returns the results. The function will then access the text input object and replace whatever the current value is with the answer from the eval() function.

That’s it!

Here is the plain HTML for the demo:

1
2
3
4
5
6
7
8

<form name="myForm">
Content to be added:
<textarea name="myContent">Type here...<h1>tags work as well</h1><u>woohoo</u></textarea>
<input type="button" value="Add content" onClick="addContent('myDiv', document.myForm.myContent.value); setCookie('content', document.myForm.myContent.value, 7);">
</form>
<br><br>
Your content will be added dynamically below:
<div id="myDiv"></div>

There are 3 important parts to the HTML code:

1. textarea – This is the content that the user enters. HTML tags are naturally supported.
2. Add content button – This buttons calls our addContent() function which passes the div id of where the content is to be entered and the actual content itself from the textarea.
3. myDiv – This is the id of blank div where the content will be inserted.

Here is the JavaScript code for the addContent() function:

1
2
3

function addContent(divName, content) {
     document.getElementById(divName).innerHTML = content;
}

That’s it! All it does it retrieve the DOM element, which in this case, is just an empty div and sets the innerHTML attribute to the content that is passed over to this function from the form.

This demo is in response to a request that saves the content that the user has entered.

Here is the HTML code:

1
2
3
4
5
6
7
8
9

<form name="myForm2">
Enter your name below and click the button.  Your name will be saved to a cookie that expires in 7 days.  When you refresh the page or come back to visit you will see a heartwarming message welcoming you back.
<br><br>
<input text name="myContent2" value="Enter your name here...">
<input type="button" value="Save my name" onClick="addContent('myDiv2', document.myForm2.myContent2.value); setCookie('content', document.myForm2.myContent2.value, 7);">
</form>
<br><br>
Your name will be saved below:
<div id="myDiv2" style="font-weight: bold;"></div>

The onClick event listener will launch 2 scripts this time:

1. addContent – This will do exactly what it did before in the first demo and just insert the input text value inside the div.
2. setCookie – This will save a cookie with the name content and assign whatever is inside the input text as the value. In addition, the cookie is set to expire in 7 days.

To avoid reinventing the wheel, I have borrowed the JavaScript get and set cookie functions from W3 Schools and edited it slightly for the needs of this demo.

Here are the new JavaScript functions for cookie management:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function setCookie(c_name,value,expiredays) {
    var exdate=new Date();
    exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
function getCookie(c_name) {
    if (document.cookie.length>0) {
        c_start=document.cookie.indexOf(c_name + "=");
        if (c_start!=-1) { 
            c_start=c_start + c_name.length+1; 
            c_end=document.cookie.indexOf(";",c_start);
            if (c_end==-1) c_end=document.cookie.length;
            var cookieContent = "Welcome back " + unescape(document.cookie.substring(c_start,c_end));
            document.getElementById('myDiv2').innerHTML = cookieContent;
        } 
    }
}
getCookie('content');

Please refer to W3 Schools for a detailed description of these JavaScript functions. The only edit I have made is with the getCookie function in lines 13-14 where it retrieves the cookie value and inserts the content into a div. Also, line 18 is very important as it calls the getCookie function and looks for the content cookie. If the cookie exists, the content will be displayed in the myDiv2 div.

When using these JavaScripts, make sure you load them after all your HTML is loaded. Otherwise, the function would have no place to insert the cookie content.

Although using cookies is a great way to store information, there are a couple of caveats:

1. Size limitation – This depends on the browser but keeping your cookies to a maximum size of 4000 bytes will keep you in the safe zone.
2. Cookie limit per domain – This also depends on the browser but the general rule is 20 cookies per domain.

Here is the plain HTML of the form. Please note that I have removed the action attribute because this is only a demo and we are only concerned with the client-side verification of the JavaScript function.

1
2
3
4
5
6
7

<form name="myform">
Email: <input type="text" name="email1">
<p><p>
Please type in your email again: <input type="text" name="email2">
<p><p>
<input type="button" onClick="verifyEmail();" value="Check Email Address">
</form>

Nothing exciting here except in line 6 where the onClick event is triggered when the user clicks on the button. This event will launch the verifyEmail() JavaScript function which will check the user input of the email address.

Here is the code for the verifyEmail() function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function verifyEmail(){
var status = false;     
var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
     if (document.myform.email1.value.search(emailRegEx) == -1) {
          alert("Please enter a valid email address.");
     }
     else if (document.myform.email1.value != document.myform.email2.value) {
          alert("Email addresses do not match.  Please retype them to make sure they are the same.");
     }
     else {
          alert("Woohoo!  The email address is in the correct format and they are the same.");
          status = true;
     }
     return status;
}

This function will return a false value if the user does not type in an email address in the correct format or if the user fails to type in the same email address in both fields. If the email addresses passes both these tests, then the function will return a true value.

The regex for validating the correct email format in line 2 has been borrowed and edited slightly by adding the i flag so that the regex is case-insensitive.

The if block in lines 3-6 checks to see if the email address in the first field passes the regex check by invoking the search() method on our email string value. This method accepts regex expressions as arguments to check the string and returns the position of the specified value in the string or a -1 if no match was found. If the search() method returns a -1, then an alert would tell the user that an invalid email address has been entered and returns a false value.

Lines 7-10 checks to see if the user has entered the same string in both email fields. This is done by a simple equality check on the string values. If the strings are different, an alert warns the user that the email addresses are not the same and returns a false value.

If we have passed the two tests, then else block in lines 11-14 gets executed. An alert tells the user that he or she has done a good job and the function returns a true value so that you can continue with the form submission.

Ideally, you would have this function run during the onSubmit attribute for the form tag. This way, the form will get submitted when the checkEmail() function returns a true value. Here is an example of how your form would look like:

1
2
3
4
5
6
7

<form name="myForm" method="POST" action="myTargetFile" onSubmit="return checkEmail()">
Email: <input type="text" name="email1">
<p><p>
Please type in your email again: <input type="text" name="email2">
<p><p>
<input type="submit" value="Submit">
</form>

Here is the plain HTML code:

1
2
3
4
5
6
7
8

<div id="parent" style="border: 1px solid red; padding: 10px;">
     I am the parent div.
     <div id="child" style="border: 1px solid green; padding: 10px;">
           I am a child div within the parent div.
     </div>
</div>
<p>&nbsp;</p>
<input type="button" value="Remove Element" onClick="removeElement('parent','child');">

The important thing to note here is that the child div is within the parent div. Once the Remove Element button is clicked, the onClick event listener is triggered and launches the removeElement JavaScript function. This functions accepts two arguments:

• parent – This is just the div id of the parent div.
• child – This is the div id of the child div.

Here is the code for the removeElement JavaScript function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function removeElement(parentDiv, childDiv){
     if (childDiv == parentDiv) {
          alert("The parent div cannot be removed.");
     }
     else if (document.getElementById(childDiv)) {     
          var child = document.getElementById(childDiv);
          var parent = document.getElementById(parentDiv);
          parent.removeChild(child);
     }
     else {
          alert("Child div has already been removed or does not exist.");
          return false;
     }
}

The if block in lines 2-6 attempts to obtain the child element if it exists. This is just in case the user has already removed the child div and is reattempting to it. In this case, a JavaScript error would normally pop up because the child div does not exist.

If the child element does exist, the first thing that we do is obtain the child element in line 3 using the child div id. Next, we do the same thing with the parent element by using the parent div id Lastly, we invoke the removeChild method from the parent element and pass the child element as the argument. That’s it!

If the child div has already been removed, the else block in lines 7-10 gets executed. In this case, an alert would tell the user that the child div has already been removed and the function would return a false value.

Here is another demo of this JavaScript function where you can type in the name of the child element to be removed and just click on the Remove Element button OR you can just click the button that corresponds to each given child div to remove it.

We are using the same JavaScript function as above. Here is the plain HTML for the demo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div id="parentDiv" style="border: 1px solid red; padding: 10px;">
     My name is <b>parentDiv</b>.  I cannot be removed.
     <div id="child1" style="border: 1px solid green; padding: 10px; margin: 10px;">
          My name is <b>child1</b>.
     </div>
     <div id="child2" style="border: 1px solid blue; padding: 10px; margin: 10px;">
          My name is <b>child2</b>.
     </div>
     <div id="child3" style="border: 1px solid purple; padding: 10px; margin: 10px;">
          My name is <b>child3</b>.
     </div>
</div>
<p>&nbsp;</p>
Name of child element to be removed: <input id="nameOfChild" type="text" value="child2"><input type="button" value="Remove Element" onClick="var name=document.getElementById('nameOfChild').value; removeElement('parentDiv', name);">
<br><br>
For those who are lazy in typing in the actual names, we have these handy-dandy buttons:
<input type="button" value="Remove child1" onClick="removeElement('parentDiv', 'child1');">
<input type="button" value="Remove child2" onClick="removeElement('parentDiv', 'child2');">
<input type="button" value="Remove child3" onClick="removeElement('parentDiv', 'child3');">
<input type="button" value="Remove parentDiv" onClick="removeElement('parentDiv', 'parentDiv');">

Here is a demo that removes child elements from the parent using checkboxes that a user would select. This demo uses the same removeElement JavaScript function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="parentDivElement" style="border: 1px solid red; padding: 10px;">
     My name is <b>parentDivElement</b>.  I cannot be removed.
     <div id="childOne" style="border: 1px solid green; padding: 10px; margin: 10px;">
          My name is <b>childOne</b>.
     </div>
     <div id="childTwo" style="border: 1px solid blue; padding: 10px; margin: 10px;">
          My name is <b>childTwo</b>.
     </div>
     <div id="childThree" style="border: 1px solid purple; padding: 10px; margin: 10px;">
          My name is <b>childThree</b>.
     </div>
</div>
<p>&nbsp;</p>
<input id="cb1" type="checkbox" value="childOne" onClick="removeElement('parentDivElement', this.value);"><label for="cb1">Remove <b>childOne</b></label>
<input id="cb2" type="checkbox" value="childTwo" onClick="removeElement('parentDivElement', this.value);"><label for="cb2">Remove <b>childTwo</b></label>
<input id="cb3" type="checkbox" value="childThree" onClick="removeElement('parentDivElement', this.value);"><label for="cb3">Remove <b>childThree</b></label>

The concept is the same as the previous demos where we attach the removeElement function to an event handler, which in this case is the onClick event handler of the checkbox. Once the checkbox is checked (or even unchecked), it fires off the onClick event handler and executes the removeElement JavaScript function and passes off the name of the parent div and the value of the checkbox.

1) Find – If only the Find box is filled in, then the findMyText() JavaScript function will just perform a find for the div that is given. If there is a match, the text will be highlighted and marked in bold.

2) Find and Replace – If both the Find and Replace boxes are filled in, then the findMyText() JavaScript function will do just that.

Here is the plain HTML:

1
2
3
4
5
6
7
8
9

<div id="haystack">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<br>
<table>
<tr><td>Find</td><td><input id="needle" name="needle" type="text"></td></tr>
<tr><td>Replacment</td><td><input id="replacement" name="replacement" type="text"></td></tr>
</table>
<input type="button" value="Find" onClick="findMyText(document.getElementById('needle').value, document.getElementById('replacement').value);">

Please excuse the use of the table for the text inputs and labels. WordPress does some automatic formatting which is annoying sometimes but it is still a great application =) The only thing of importance here is on line 9 where the onClick event executes the findMyText() function and passes 2 arguments:

• Needle – This is the text that we are trying to find in the haystack of text.
• Replacement – This is our replacement text for any needle that we find.

Here is our JavaScript function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var haystackText = "";
function findMyText(needle, replacement) {
     if (haystackText.length == 0) {
          haystackText = document.getElementById("haystack").innerHTML;
     }
     var match = new RegExp(needle, "ig");     
     var replaced = "";
     if (replacement.length > 0) {
          replaced = haystackText.replace(match, replacement);
     }
     else {
          var boldText = "<div style=\"background-color: yellow; display: inline; font-weight: bold;\">" + needle + "</div>";
          replaced = haystackText.replace(match, boldText);
     }
     document.getElementById("haystack").innerHTML = replaced;
}

Like many of the scripts that you see here, using the JavaScript DOM objects is the key to doing the find and replace dynamically for our website.

The script asks for two parameters: the needle which we are looking for in our text and the text we want to replace it with. Please note that the replacement text is totally optional. If no replacement text is given, then the behavior of the function changes a bit.

The haystackText variable is outside of the function in line 1 because we want to store the original text and always base our searches on the original text. In lines 3-5 is where we store the original text in our haystack div if it is not already set.

Line 6 creates a regular expression object where we place our needle variable along with two flags:

• i – This flag causes the regular expression match to be case-insensitive.
• g – This flag causes the regular expression match to be global so it matches every occurrence instead of just the first one.

Lines 8-10 checks to see if the replacement text was set. If so, we will use the replace method on our haystackText string object and feed it our match and replacement texts. The resulting string will be saved in the replaced variable.

If the replacement text was not set, the else block in lines 11-14 will be executed. We first prepare a variable of our needle that has a bit of extra styling such as a yellow background and bold text so it stands out better. Next, we just use the replace method on our haystackText string object and pass the match and replacement texts. The resulting string will be saved in the replaced variable.

Lastly, the replaced variable which contains our results is used to substitute what was originally in our haystack div.

Here is the HTML code including the JavaScript:

1
2
3

<input type="checkbox" onClick="document.getElementById('theSubmitButton').click();">Check the box to simulate a button click
<br>
<input type="button" name="theSubmitButton" id="theSubmitButton" value="Button" onClick="alert('The button was clicked.');">

If the button is clicked directly, a JavaScript alert will pop up with the following message:

The button was clicked.

The onClick event handler for the checkbox will access the HTML DOM button object and invoke the click() method. This simulates the button click and invokes the alert.

This is the plain HTML of the form:

1
2
3
4
5
6
7
8

<form name="theForm">
My favorite programming/scripting language is:<p>
Select <a href="javascript:selectToggle(true, 'theForm');">All</a> | <a href="javascript:selectToggle(false, 'theForm');">None</a><p>
<input type="checkbox" name="answers[]" value="javascript">JavaScript<p>
<input type="checkbox" name="answers[]" value="perl">Perl<p>
<input type="checkbox" name="answers[]" value="php">PHP<p>
<input type="checkbox" name="answers[]" value="c++">C++
</form>

There is nothing exciting about the HTML code except for line 3 where all the magic happens. There are 2 links in this line of code:

• All - When the user clicks on this link, it will execute the selectToggle() JavaScript function and passes over 2 arguments: the value to set the checkboxes (true in this case) and the name of the form.
• None - This link executes the selectToggle() JavaScript function and passes over the false value to uncheck the checkboxes and the name of the form.

Here is a peek at the selectToggle() JavaScript function:

1
2
3
4
5
6
7
8
9
10
11

function selectToggle(toggle, form) {
     var myForm = document.forms[form];
     for( var i=0; i < myForm.length; i++ ) { 
          if(toggle) {
               myForm.elements[i].checked = "checked";
          } 
          else {
               myForm.elements[i].checked = "";
          }
     }
}

This function basically loops through all of the inputs in the given form name that is passed over as an argument. Depending on the value of the toggle parameter, which can be true or false, each form element will checked or unchecked respectively.

Here is the plain HTML for the form:

<form method="POST" onSubmit="return verifyForm(this);">
Username<input type="text" name="name"><div id="usernameMsg" style="display:none;"><span style="color:red;">Please fill in your username.</span></div>
<br>
Email<input type="email" name="email"><div id="emailMsg" style="display:none;"><span style="color:red;">Please fill in your email.</span></div>
<br>
<input type="submit" value="Submit">
</form>

Notice that the error warnings such as the Please fill in your username. or Please fill in your email. have already been preloaded but hidden from the viewer by setting the display attribute to none. If the user submits the form with one or more of the fields blank, 4 things will happen to notify the user (Note: I tried to squeeze in as many warning events as possible just for demonstration purposes so I apologize if it is a bit over the top):

1. the background of the missing input field will turn yellow
2. a red border will appear around the missing input field
3. the hidden error message will become visible
4. an alert will pop up notifying the user that 1 or more fields are missing

When the user clicks on the Submit button, the onSubmit event gets triggered and executes the verifyForm() JavaScript function. If the onSubmit event returns a false value, the form does not get submitted. This value is determined by the verifyForm() function, which returns true if all fields are filled in and returns false if one or more fields are missing.

Here is a peek at the JavaScript verifyForm() function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

function verifyForm(form) {
    var userName = form.name.value;
    var userEmail = form.email.value;
    var success = 1;
    if (!userName) {
        document.getElementById("usernameMsg").style.display = "block";
        form.name.style.backgroundColor = "yellow";
        form.name.style.border = "3px red solid";
        success = 0;
    }
    else {
        form.name.style.backgroundColor = "";
        form.name.style.border = "";
        document.getElementById("usernameMsg").style.display = "none";
    }
    if (!userEmail) {
        document.getElementById("emailMsg").style.display = "block";
        form.email.style.backgroundColor = "yellow";
        form.email.style.border = "3px red solid";
        success = 0;
    }
    else {
        form.email.style.backgroundColor = "";
        form.email.style.border = "";
        document.getElementById("emailMsg").style.display = "none";
    }
    if(!success) {
        alert("The form is incomplete.  Please read the error message(s).");
        return false;
    }
    else {
        alert("The form was submitted succesfully!");
        return true;
    }
}

Lines 5-15 checks to see if the username field is blank or not. If the field is blank, it uses the DOM to access the div that is holding our warning message to the user and sets the display attribute to block (line 6). This makes the message visible to the user.

Next, it accesses the input text field and dynamically changes the backgroundColor attribute to yellow (line 7).

Then, it accesses the input text field again and dynamically changes the border attribute to 3px red solid (line 8). Here is a quick breakdown of the attribute we just used:

• 3px – the width of the border
• red – the color of the border
• solid – the style of the border

Finally, it sets the success variable to 0 which is equivalent to a false value (line 9). We will use this variable later on to decide if the form is ready to be submitted or not.

The else statement in lines 11-14 just resets all the styling back to the default values. This is for the case where a user is resubmitting the form so we want to remove all the warnings just in case they were activated from any previous submissions.

Lines 16-26 does the same exact thing except it is for the email text input field. Remember, all we are doing in this example is checking to see if the field is empty or not. This is to keep the code simple.

Line 27 checks the success variable to see if it had been set to false. If so, an alert is executed telling the user that one or more fields were missing and to check the error messages (line 28). Then it returns a false value to prevent the form from being submitted (line 29).

If the form has been filled-in completely, the else block gets executed in lines 31-34. In this case, an alert is executed saying that the form was submitted successfully. As a resutl, the function returns the value true which then submits the form.

Here is the JavaScript code that makes all this possible:

<div id="dynamicContent">Hello world!</div>
<input type="button" onClick="document.getElementById('dynamicContent').style.fontWeight = 'bolder';" value="Bold">
<input type="button" onClick="document.getElementById('dynamicContent').style.fontWeight = 'lighter';" value="Lighter">
<input type="button" onClick="document.getElementById('dynamicContent').style.fontStyle = 'normal';" value="Normal">
<input type="button" onClick="document.getElementById('dynamicContent').style.fontStyle = 'italic';" value="Italic">
<input type="button" onClick="document.getElementById('dynamicContent').style.fontFamily = 'courier';" value="Courier">
<input type="button" onClick="document.getElementById('dynamicContent').style.fontFamily = 'roman';" value="Times Roman">

In this example, we use the JavaScript onClick event handler to dynamically change the content styling of the text within the div tags. To access the div object, we use the getElementById() function and pass over the div id which is, dynamicContent in this case, as the argument. Once we have access to the div element, we have access to all the styles that are associated with it.

There are a myriad of things that you can change such as font size, font weight, font face, font color, background color, borders and much much more.

Here is the plain HTML for the form:

<script src="/wp-includes/js/addInput.js" language="Javascript" type="text/javascript"></script>
<form method="POST">
     <div id="dynamicInput">
          Entry 1<br><input type="text" name="myInputs[]">
     </div>
     <input type="button" value="Add another text input" onClick="addInput('dynamicInput');">
</form>

When the user clicks on the Add another text input button, the addInput JavaScript function is executed and given the dynamicInput argument which is the name of the div that contains all our text inputs. Here is what our JavaScript function looks like:

var counter = 1;
var limit = 3;
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}

There are a couple of global variables:

• counter – Tracks the number inputs being added.
• limit – The maximum number inputs allowed for the user to add. In this case, we are limiting the user to a maximum of 3 input texts that they can submit with the form.

The addInput JavaScript function expects a parameter, which in this case is the id of the div, to add the dynamic text inputs. Once executed, the function will first check to see if the maximum number of input texts have already been used. If so, an alert will be given stating that the limit has been reached.

If the limit has not been reached, then the else block of the code is executed. A new div element is created and the inner HTML is set with 2 things:

• Entry # – The global variable, counter, keeps track of the current number of text inputs that are in the form.
• The input text element – The name of these text inputs,myInputs[], is followed by square brackets to indicate that it is an array. This will be more important later on when the form is submitted using the POST method.

If the form gets submitted to a PHP file, you can easily access each input value for your myInputs array. Here is the PHP code for doing just that:

$myInputs = $_POST["myInputs"];
foreach ($myInputs as $eachInput) {
     echo $eachInput . "<br>";
}

This is just a sample code to echo all the text input values that were sent from the form. An array variable, $myInputsPHP, is initialized with the myInputs from the form. Then, the foreach loop will go through each value and print them out.

Here is another version of this script that adds different types of inputs such as text fields, radio buttons, checkboxes, and textareas. To simplify things, the limit functionality has been removed.

Here is the plain JavaScript code for the addAllInputs function. It accepts 2 arguments:

• div id – This is the div id where all the dynamic inputs will be added to.
• input type – This is the type of input that we want to add.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

var counterText = 0;
var counterRadioButton = 0;
var counterCheckBox = 0;
var counterTextArea = 0;
function addAllInputs(divName, inputType){
     var newdiv = document.createElement('div');
     switch(inputType) {
          case 'text':
               newdiv.innerHTML = "Entry " + (counterText + 1) + " <br><input type='text' name='myInputs[]'>";
               counterText++;
               break;
          case 'radio':
               newdiv.innerHTML = "Entry " + (counterRadioButton + 1) + " <br><input type='radio' name='myRadioButtons[]'>";
               counterRadioButton++;
               break;
          case 'checkbox':
               newdiv.innerHTML = "Entry " + (counterCheckBox + 1) + " <br><input type='checkbox' name='myCheckBoxes[]'>";
               counterCheckBox++;
               break;
          case 'textarea':
	       newdiv.innerHTML = "Entry " + (counterTextArea + 1) + " <br><textarea name='myTextAreas[]'>type here...</textarea>";
               counterTextArea++;
               break;
          }
     document.getElementById(divName).appendChild(newdiv);
}

Here is the sample HTML and Javascript code:

<script language="javascript"> 
function toggle() {
	var ele = document.getElementById("toggleText");
	var text = document.getElementById("displayText");
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "show";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "hide";
	}
} 
</script>
 
<a id="displayText" href="javascript:toggle();">show</a> <== click Here
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

By default, the peek-a-boo text is loaded when the page loads but the display attribute for the div that the content resides in is set to none so it is not visible to the visitor. When the link is clicked, the toggle() JavaScript functions executes and checks the value of the display style for the div that contains the content that we want to toggle.

• If the display style is none, the function will:
• Set the display style to block - This is executed in the else block of the function. The inner HTML content of a DOM element with a block display setting will be visible unless it is furthered controlled by CSS styling.
• Change the link text to hide - The inner HTML of the link text, which in this case is just show, is replaced with the hide text.
• If the display style is block, the function will:
• Set the display style to none - This is executed in the if block of the function. The inner HTML content of a DOM element with the none display setting will not be visible for the viewer.
• Change the link text to show - The inner HTML of the link text, which in this case is just hide, is replaced with the show text.

Here is a more reusable and flexible toggle function that takes 2 parameters: one for the div to hide/show and a second parameter for the div that contains the link text to be switched.

<script language="javascript"> 
function toggle(showHideDiv, switchTextDiv) {
	var ele = document.getElementById(showHideDiv);
	var text = document.getElementById(switchTextDiv);
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "show";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "hide";
	}
} 
</script>

If you spice up this demo with some extra CSS styling, this can look like a nice little dialog box.

<div id="headerDiv">
     <div id="titleText">Random Snippets Hide/Show Div Demo - Click here ==></div><a id="myHeader" href="javascript:toggle2('myContent','myHeader');" >collapse</a>
</div>
<div style="clear:both;"></div>
<div id="contentDiv">
     <div id="myContent" style="display: block;">This is the content that is dynamically being collapsed.</div>
</div>

Here is the toogle2 JavaScript function:

function toggle2(showHideDiv, switchTextDiv) {
	var ele = document.getElementById(showHideDiv);
	var text = document.getElementById(switchTextDiv);
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "restore";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "collapse";
	}
}

As requested, here is an example of a JavaScript function that toggles multiple elements simultaneously. You can either toggle each DIV individually or use the button to toggle all 3 regardless of which toggle mode they are in.

This demo uses the toggle2 function as previously demonstrated and a new function called toggle3. I apologize for not being very creative on the function names. Anyway, here is the JavaScript code for toggle3:

1
2
3
4
5
6
7
8
9
10

function toggle3(contentDiv, controlDiv) {
        if (contentDiv.constructor == Array) {
                for(i=0; i < contentDiv.length; i++) {
                     toggle2(contentDiv[i], controlDiv[i]);
                }
        }
        else {
               toggle2(contentDiv, controlDiv);
        }
}

Line 2 of the function checks to see if the first argument is an array or not. If it is an array, it will also assume that the second argument is an array as well. If it is an array, the script will loop through each element and execute toggle2 with each pair of elements in the arrays. Please note that this function also assumes that both arrays are in the same order such that contentDiv[3] and controlDiv[3] are a pair that refer to the same toggle element.

If the first argument is not an array, we will just pass the arguments as is to toggle2.

Here is the HTML code for the demo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<table>
   <tr>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader1" href="javascript:toggle2('myContent1','myHeader1');" >collapse</a>
         </div>
         <div id="myContent1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;">Div #1</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader2" href="javascript:toggle2('myContent2','myHeader2');" >collapse</a>
         </div>
         <div id="myContent2" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;">Div #2</div
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader3" href="javascript:toggle2('myContent3', 'myHeader3');" >collapse</a>
         </div>
         <div id="myContent3" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;">Div #3</div
      </td>
   </tr>
</table>
<input type="button" value="Press me to toggle all 3 DIVs" onClick="toggle3(['myContent1', 'myContent2', 'myContent3'], ['myHeader1', 'myHeader2', 'myHeader3']);">

All the excitement is jammed into line 23 where we call the toggle3 function and pass over 2 arrays: one array containing all the content div ids and another array containing the header div ids. The rest is history =)

This demo was written in response to a request. We start off with some hidden divs and each click of the button will reveal one div at a time. When we have revealed all the divs, the button will disappear.

Here is the HTML code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<table>
   <tr>
      <td>
         <div id="box1" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">First</div>
      </td>
      <td>
         <div id="box2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Second</div
      </td>
      <td>
         <div id="box3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Third</div
      </td>
   </tr>
</table>
<input id="toggleButton" type="button" value="Show me the money!" onclick="counter++; toggle4('box');">

The HTML code contains 3 hidden divs to start off with. The button will launch the toggle4 JavaScript function and pass over the prefix of the div IDs. Each div id is named with the prefix box and a number following the name. For example, box1, box2, and box3. This is important for our JavaScript function. In addition, it increments the counter by 1 each time. This variable is initialized in our function.

Here is the JavaScript code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var counter = 0;
var numBoxes = 3;
function toggle4(showHideDiv) {
       var ele = document.getElementById(showHideDiv + counter);
       if(ele.style.display == "block") {
              ele.style.display = "none";
       }
       else {
              ele.style.display = "block";
       }
       if(counter == numBoxes) {
                document.getElementById("toggleButton").style.display = "none";
       }
}

Lines 1 and 2 will initialize two very important variables for us:

1. counter - This variable will help us determine which box we will need to toggle.
2. numBoxes - This variable represents the total number of boxes. This is important for us to know when we should hide the button.

Line 4 accesses the div we will need to toggle based on the name that is passed over as the argument and the counter. When these 2 values are concatenated, we get the name of the div we will need to toggle.

Lines 5-10 tells the same old story as before for toggling the content.

Lines 11-13 tests to see if we have reached our maximum number of divs to toggle. If so, it will access the toggle button and set the display attribute to none.

By popular demand, here is a demo that uses images instead of the Expand/Collapse text.

Here is the HTML code:

1
2
3
4
5

<div id="headerDivImg">
    <div id="titleTextImg">Let's use images!</div>
    <a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'imageDivLink');"><img src="/wp-includes/images/minus.png"></a>
</div>
<div id="contentDivImg" style="display: block;">This demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.</div>

Everything is pretty much the same as before except the image tag is used instead of the Expand/Collapse text.

Here is the JavaScript code:

1
2
3
4
5
6
7
8
9
10
11
12

function toggle5(showHideDiv, switchImgTag) {
        var ele = document.getElementById(showHideDiv);
        var imageEle = document.getElementById(switchImgTag);
        if(ele.style.display == "block") {
                ele.style.display = "none";
		imageEle.innerHTML = '<img src="/wp-includes/images/plus.png">';
        }
        else {
                ele.style.display = "block";
                imageEle.innerHTML = '<img src="/wp-includes/images/minus.png">';
        }
}

The toggle5 JavaScript function is pretty much the same as the rest of the toggle functions except that it switches the img tags instead of text.

Here is a new demo in response to a request where only one div is displayed at any one time.

Here is the plain HTML code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<table>
   <tr>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >collapse</a>
         </div>
         <div name="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;">Div #1</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >collapse</a>
         </div>
         <div name="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #2</div
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >collapse</a>
         </div>
         <div name="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #3</div
      </td>
   </tr>
</table>

Clicking on the links will execute the showonlyone JavaScript function and pass on the name of the div id.

Here is the showonlyone JavaScript code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function showonlyone(thechosenone) {
      var newboxes = document.getElementsByTagName("div");
            for(var x=0; x<newboxes.length; x++) {
                  name = newboxes[x].getAttribute("name");
                  if (name == 'newboxes') {
                        if (newboxes[x].id == thechosenone) {
                        newboxes[x].style.display = 'block';
                  }
                  else {
                        newboxes[x].style.display = 'none';
                  }
            }
      }
}

Thanks to Justin and Ulysses for helping out with the IE6 bug that was there =)

Line 2 will find all our divs with the newboxes name attribute and place them in an array. Lines 3-10 will loop through these divs and check to see if the id of the div matches the id that was passed over to the function. If there is a match, the function will set the display attribute to block which will make the div and all its contents visible. If the id does not match, the display attribute will be set to none which will make the div and all its contents hidden.