Toggle Multi select Widget : Toggle « GUI Components « JavaScript DHTML

Toggle Multi select Widget

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Multi-select Widget</title>

<script language="JavaScript" type="text/javascript">

/* ***** BEGIN LICENSE BLOCK *****
 * Version: MPL 1.1/GPL 2.0/LGPL 2.1
 * The contents of this file are subject to the Mozilla Public License Version
 * 1.1 (the "License"); you may not use this file except in compliance with
 * the License. You may obtain a copy of the License at
 * Software distributed under the License is distributed on an "AS IS" basis,
 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
 * for the specific language governing rights and limitations under the
 * License.
 * The initial developer of the code is Andy Edmonds.
 * Portions created by the Initial Developer are Copyright (C) 2001
 * the Initial Developer. All Rights Reserved.
 * Contributor(s):
 *  Andy Edmonds <>
 * Alternatively, the contents of this file may be used under the terms of
 * either the GNU General Public License Version 2 or later (the "GPL"), or
 * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
 * in which case the provisions of the GPL or the LGPL are applicable instead
 * of those above. If you wish to allow use of your version of this file only
 * under the terms of either the GPL or the LGPL, and not to allow others to
 * use your version of this file under the terms of the MPL, indicate your
 * decision by deleting the provisions above and replace them with the notice
 * and other provisions required by the GPL or the LGPL. If you do not delete
 * the provisions above, a recipient may use your version of this file under
 * the terms of any one of the MPL, the GPL or the LGPL.
 * ***** END LICENSE BLOCK ***** */
var multis = "methods,datasources,lifecycle"; 
var isEdit = false; // Using numeric count for number of specified values
var inSequence = true; // Set to false to disable auto-sequential expansion
var autoCollapse = true; // Only allow one container to be expanded at a time

// TRACKING VARIABLES -- do not change
var arMultis = multis.split(","); 
var curOpen = false;
var sequenceNum = 0; //Tracker for auto-sequential expansion
var isOpen = -1; // Currently open element for auto-collapse

function initMultiSelect() {
  var isEdit = false;
  var i, viewSummary, viewOptions;

  for(i=0;i<arMultis.length;i++) {
    viewSummary = document.getElementById("summary_" + arMultis[i]);
    viewOptions = document.getElementById("options_" + arMultis[i]);
    // In edit default to all collapsed
    // In new mode, default to editing first element
    // If any checkbox is selected, dont reset edit flag
    if(!isEdit) {
      isEdit = populateSummary(viewSummary, viewOptions);
    } else {
      populateSummary(viewSummary, viewOptions);
    if(isEdit) inSequence = false;
    showSummary(viewSummary, viewOptions);
  // If it's an edit
  if(!isEdit && inSequence) {
    var firstField = arMultis[0];
    // Show first option panel
      document.getElementById("summary_" + firstField),
      document.getElementById("options_" + firstField)

function populateSummary(sum,opt) {
  var editString = "<input type='button' value='Edit Selections' onclick='showOptions(this.parentNode,this.parentNode.previousSibling);'>";
  var curNode;
  var numChecked = 0;
  var sumStr = '';
  // Get all checkboxes inside current div 
  var inputs = opt.getElementsByTagName("input");
  //alert(inputs.length + " inputs in " +;
  for(var i=0;i<inputs.length;i++) {
    curNode = inputs.item(i);
    if(curNode.nodeName == "INPUT" && curNode.getAttribute("type") == "checkbox") {
      if(curNode.checked) {
        if(numChecked > 0) sumStr += "; ";
        sumStr += curNode.getAttribute("value") + ''; 
        //alert("At " + i +   " of " + curNode.getAttribute("value"));
  // Options selected? summarize. Otherwise? instruct.
  if(sumStr.length) {
    sum.innerHTML = sumStr + ".<br/>" + editString;
  } else {
    // No current selectiongs, provide help msg
    sum.innerHTML = "Please click Edit Selections to specify" + ".<br/>" + editString;
  // Pass back positive if items are already checked
  return numChecked;

function showSummary(sum, opt) { = 'inline'; = 'none';
  isOpen = -1;

function showOptions(sum, opt) { = 'none'; = 'inline';
  if(isOpen > -1 && autoCollapse) {
      document.getElementById("summary_" + arMultis[isOpen]),
      document.getElementById("options_" + arMultis[isOpen])
  isOpen = getOffset(sum.getAttribute("id"));

function getOffset(label) {
  for(var i=0;i<arMultis.length;i++) {
    if(label.indexOf(arMultis[i]) > -1) return i;

function saveOptions(optNode) {
  var sumNode = document.getElementById("summary_" +optNode.getAttribute("id").split("_")[1]);  
  if(inSequence) {
    // check to see if the user is editing sequentialy
    if([sequenceNum]) > -1) {
      // They're editing in sequence
      // Is there a next element to show?
      if(sequenceNum < arMultis.length) {
        var nextField = arMultis[sequenceNum];
          document.getElementById("summary_" + nextField),
          document.getElementById("options_" + nextField)
    } else {
      inSequence = false;

<body onload="initMultiSelect()">

<table cellpadding="8" cellspacing="0" width="942">
    <td valign="top" width="12%">Usability Methods</td>
    <td bgcolor="#ffffff" width="88%">       
<div style="display: inline;" id="options_methods"><table><tbody><tr><td valign="top">
<input name="methods" value="Card Sorting" id="cardsort" type="checkbox"><label for="carsort">Card Sorting</label><br>
<input name="methods" value="Contextual Task Analysis" id="cta" type="checkbox"><label for="cta">Contextual Task Analysis</label> <br>
<input name="methods" value="Ethnography" id="ethno" type="checkbox"><label for="ethno">Ethnography</label><br>

</td><td valign="top">
<input name="methods" value="Heuristic Review" id="heur" type="checkbox"><label for="heur">Heuristic Review</label><br>
<input name="methods" value="Remote Usability Testing" id="remote" type="checkbox"><label for="remote">Remote Usability Testing</label><br>
<input name="methods" value="Usability Testing" id="ut" type="checkbox"><label for="ut">Usability Testing</label><br>
<input value="Close" style="float: left;" onclick="saveOptions(this.parentNode);" type="button"></div><div style="display: none;" id="summary_methods">Please click Edit Selections to specify.<br><input value="Edit Selections" onclick="showOptions(this.parentNode,this.parentNode.previousSibling);" type="button"></div>
  <tr bgcolor="#dddddd">
  <td id="label_activity" valign="top">Datasources</td>
  <td valign="top">
    <div style="display: none;" id="options_datasources">
  <table><tbody><tr><td valign="top">
<input name="methods" value="Competitive Review" ic="comp" type="checkbox"><label for="comp">Competitive Review</label><br>
<input name="methods" value="Performance Data" id="perf" type="checkbox"><label for="perf">Performance Data</label><br>
<input name="methods" value="Verbal Protocol" label="protocol" type="checkbox"><label for="protocol">Verbal Protocol</label><br>

</td><td valign="top">
<input name="methods" value="User Surveys" id="survey" type="checkbox"><label for="survey">User Surveys</label><br>
<input name="methods" value="Support Requests" id="support" type="checkbox"><label for="support">Support Requests</label><br>
<input name="methods" value="Usage Data" id="usage" type="checkbox"><label for="usage">Usage Data</label><br>
        <input value="Close" style="float: left;" onclick="saveOptions(this.parentNode);" type="button"></div><div style="display: inline;" id="summary_datasources">Please click Edit Selections to specify.<br><input value="Edit Selections" onclick="showOptions(this.parentNode,this.parentNode.previousSibling);" type="button"></div>
        </tr><tr><td valign="top">Lifecycle </td>
        <td valign="top">
          <div style="display: none;" id="options_lifecycle">
          <table><tbody><tr><td valign="top">
<input name="methods" value="Acceptance Testing" id="at" type="checkbox"><label for="at">Acceptance Testing</label><br>
<input name="methods" value="Iterative Design" id="iterative" type="checkbox"><label for="iterative">Iterative Design</label><br>
<input name="methods" value="Needs Analysis" id="needs" type="checkbox"><label for="needs">Needs Analysis</label><br>

</td><td valign="top">

<input name="methods" value="Rapid Prototyping" id="proto" type="checkbox"><label for="proto">Rapid prototyping</label><br>
<input name="methods" value="Requirements Definition" id="reqs" type="checkbox"><label for="reqs">Requirements Definition</label><br>
<input name="methods" value="Specification" id="spec" type="checkbox"><label for="spec">Specification</label><br>


<input value="Close" style="float: left;" onclick="saveOptions(this.parentNode);" type="button"></div><div style="display: inline;" id="summary_lifecycle">Please click Edit Selections to specify.<br><input value="Edit Selections" onclick="showOptions(this.parentNode,this.parentNode.previousSibling);" type="button"></div>




Related examples in the same category

1.Toggle page
2.Dynamic Content: click show and re-click disappear (IE)
3.Create custom page and replace current document with it
4.Toggle web page