jQuery Expand Collapse: Interactive Widgets for Your Webpage

Toggle Widgets with Javascript and jQuery shutterstock_172084607

Javascript provides the client-side interactive part of the web applications. jQuery is a specialized light-weight library which provides cross platform, multi-browser compatible API, you may develop your web-app in Javascript.

In this blog post, we show you how you can get started toward building your own client-side interactive applications using jQuery expand, collapse, toggle functions, and animations. We will also show a simple jQuery plugin that can show advanced expand-collapse behavior on top of the baseline jQuery.

JavaScript Programming Language

Javascript is a programming language is primarily used to add interactivity to static HTML pages, but scripting the document-object-model (DOM) of the web page, in the browser that is rendering the web page. This is also called client-side programming.

jQuery Library

Typically a javascript is loaded by the web browser after the web page elements static HTML, resource images and video are loaded. First you need to load the jQuery library in the ‘head’ section of the HTML page, as follows. Learn more about beginning JavaScript.

Loading jQuery Library

In the HTML page, within the the ‘<head>’ section in a ‘<script>’ tag you can load the jQuery file from one of the content distribution networks (CDN) by the following element,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script>

This tag asks the browser to download jQuery v1.8 from the Google CDN.

Using jQuery Variables

Jquery provides a shortcut variables to access, create and modify, DOM elements of the web page using the class or id attribute selectors. Typically the selector object is accessible by special variable ‘$’. The key point of the selector object is the fact that every object method invocation returns a reference to the same ‘$’ object.

jQuery Expand-collapse

Expand and collapse operations are carried out on <DIV> tags so that they support things like tree view in a file-system, or display a hierarchy of related objects etc. In jQuery expand and collapse are done by the show, and hide tags.

Example : jQuery Show, Hide, and Toggle

We illustrate ‘hide’ DOM elements functionality during page-loads by hooking up a callback to the ‘onLoad’ event. To run functions when the web page has finished loading, you may use the OnLoad attribute of the body tag, or you can simply write,

<script>
var onload_callback = function () {
window.alert('Hello World!')
}
$( onload_callback ); //setup the onload callback at end of page load.
</script>

Now, we look at the application of the hide() function. Lets say you have a DIV tag, with ID ‘disclaimer’, and you want to show it only on IE and Chrome web browsers, but not on Firefox, you would use something like the following, along with your HTML,

<!-- demo the toggle/hide/show buttons -->
<HTML>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script>
<script type="text/javascript">
    // include body of function, 'showDisclaimer' above..
    // not reproduced here for brevity of blog
    /* Currently web-based evaluator works only in FireFox */
function showDisclaimer() {
    var isMozillaBased = navigator.userAgent.search("Mozilla") >= 0 && !(navigator.userAgent.search("Chrome") >= 0);
    if ( ! isMozillaBased ) {
        $("#disclaimer").show();
    } else {
        $("#disclaimer").hide();
    }

    return isMozillaBased;
    };

    $( showDisclaimer );
</script>
</head>
<body>
<div id="disclaimer"><p> this is content only the users of Chrome and IE will see. Other users of Mozilla based browsers like Firefox will not see it.</p></div>
<pre>
Enter the content of rest of your website
</pre>
</body>
</html>

Example : International Temperature Converter Web Application

Certain countries use Fahrenheit scale (*F) or Centigrade (*C) notations to report temperature; in this web app, we can allow conversion from one form to the other based on the country. For ease of use, we will assume USA alone uses the Fahrenheit scale.

Our web application will hide the convert C->F when country of choice is USA, and show only F->C option. Putting it all together, here is how it looks,

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script>
<script type="text/javascript">

function updateWidgets() {
  var isUSA = $('#country').val().search("USA") >= 0;
  if ( isUSA ) {
    console.log('== USA');
    $('#F2C').show();
    $('#C2F').hide();
  } else {
    console.log('!= USA');
    $('#F2C').hide();
    $('#C2F').show();
  }
};

var calcF2C = function() {
   var F = $('#tempF').prop('value')/1.0;
   var C = (F - 32.0)*5.0/9.0;
   console.log('Calculating F2C for '+F+' *F')
   $('#tempC').prop('value', C);
   window.alert('F [ '+F.toString()+ '] = '+C.toString()+' *C');
   return $('#tempC').value;
};

var calcC2F = function() {
   var C = $('#tempC').prop('value')/1.0;
   var F = C*9.0/5.0 + 32;
   console.log('Calculating C2F for '+C+' *C')
   $('#tempF').prop('value', F);
   window.alert('C [ '+C.toString()+ '] = '+F.toString()+' *F');
   return $('#tempF').value;
};

$( updateWidgets ); //onload
</script>
</head>
<body>
<P>
Country : <select id="country" onClick="javascript:updateWidgets();">
<option>USA</option>
<option>Haiti</option>
<option>Rwanda</option>
<option>India</option>
</select>
</P>

<button id="F2C" onclick="javascript:calcF2C();">Calculate F2C</button>
<button id="C2F" onclick="javascript:calcC2F();">Calculate C2F</button>
<BR />
<div>
<P>Temperature in degrees:</P>
<input type=”text” id="tempF" value="212" /> <sup>*</sup>F<BR />
<input type=”text” id="tempC" /><sup>*</sup>C<BR />
</div>

</body>
</html>

In this code we will calculate the temperature in Centigrade given the temperature in Fahrenheit, using the formula C = (F-32)*9/5. Copy paste the following code in a text file, download the jquery.js file into the current folder from jquery.com, and then fire off the chrome or firefox browser and look at your new web-application.

We illustrate clearly the two functions, init, and calc, which are callback for onload() event, and the button click event. init() function writes a welcome message to the debug log window every time the page is loaded. Calc() function gets the values from the entry tempF, and updates tempC entry in the DOM with the calculated temperature in Centigrade.

Try this app with F=212, and F=32. What is the boiling point of water in Centigrade? What is the freezing point of water in Centigrade ? What is it like, in *F, to be at 42*C in a hot Indian summer?

Using jQuery Toggle

Toggle functionality enables you to show or hide the widget in response to user actions. You don’t have to keep track of the state of the widgets, and jQuery does this automatically for you and calls hide or show, as appropriate.

Pick this method on the widget objects if you need a show/hide functionality. Learn more advanced javascript techniques.

Summary

Modern web applications, built in web 2.0 technologies, allow using complex software applications via the Internet, as alternatives to desktop based software. Web applications in social media space, like Facebook, Twitter, and Google+ enable rapid sharing of information while serving as a common whiteboard medium to learn and share information. In their editing, formatting and rendering powers provided without installing much software – by primarily running software in the sandboxed environment of a web browser – the web apps provide the new paradigm of delivering software on Internet. You probably may need JavaScript made easy.

Javascript provides the client-side interactive part of the web applications. jQuery is a specialized light-weight library which provides cross platform, multi-browser compatible API in which you may develop your web-app. In this blog post, we show you how you can get started toward building your own client-side interactive applications using jQuery variables, and post some data to the web server.

Learn More About jQuery Framework

  1. The jQuery framework is hosted at with current (latest) and past software releases available for download under the MIT license.

  2. jQuery framework provides you with plenty of 3rd party plugins to improve UI widgets, keyboards, animations etc. Learn Web programming the easy way.

  3. Good references on JavaScript include Brian Flanagan’s ‘Definite JavaScript,’ which also talks about jQuery in the later sections.

  4. Debugging javascript is easier on a modern browser like Firefox or Chrome, with the plugins, e.g. Fire Bug with Firefox, and the JavaScript console to know your code works.

  5. The jQuery async programming using the $.ajax() call, a mechanism based on the XMLHttpRequest, allows building web apps powered by a server backend.

  6. CDN from Microsoft, Google etc. provide jQuery libraries.