Combining CSS and JavaScript to Save Page Space

Overview

Real estate on a website has become a valuable commodity. Website owners and designers are faced with the challenge of providing enough content to satisfy their visitors, while also maintaining the visual appeal and usability of the website. On one end of the spectrum is a web page with tons of content, which requires that the user scroll almost endlessly down the page to find what they are looking for. On the other end is a webpage with mere links to more information, which relies on the user to click more to find what they are looking for. Somewhere in the middle is the ideal web page layout, where users have access to the information that they are looking for on the page, without having to use the scroll bar excessively to find it.

For example, imagine your typical Frequently Asked Questions page, which is usually a pretty long page. Many site owners provide a list of the questions covered on the page at the top, with links that jump to the appropriate part of the page when clicked. When combined with a “back to top” link, or some other method of easily returning to the top, this is a very effective way to communicate. Or, as another example, take a common checkout form on a shopping cart. Typically there will be a section for the user to input their billing information, as well as another section for them to input their shipping information (should the two differ). In most cases, the shipping address will probably be the same as the billing address, however the user still is presented with this section of the checkout form, even though they won’t use it.

While neither of these examples are very critical, they do illustrate the varying demands placed on webpage real estate by users. In this tutorial we will explore a method of “toggling” content on a web page in order to make better use of the space available. Rather than displaying the shipping address section of a checkout form by default, why not have it only display if the customer’s shipping address is different from the billing address? This would save space on the checkout form, which can reduce the number of visitors that abandon the checkout process.

We will combine HTML, JavaScript, and CSS to accomplish the goal of hiding part of a form in this tutorial. We will first start with our HTML, creating a form that is structured in such a way that we will be able to hide a section of it (the shipping information) from our users when they visit the page. We will then write a small JavaScript function that will control the CSS display property of that section of our form. Our goal is to create a form that is compact, simple and easy to understand that can also expand on demand. Users that have a different shipping address than their billing address will be able to enter their information just as anyone else would. However, those who do not require this added functionality will never even know it was there.

This tutorial is aimed at exposing the kinds of functionality that can be achieved by combining the tools available to a web designer. With a growing emphasis on website analytics to determine user behavior and conversion bottlenecks, eliminating problematic sections of a website has become a growing concern. By understanding the problems that visitors are having, and armed with the tools available to correct them, we can begin to devise solutions that will accommodate users better and make a website more efficient.

Instruction

Our first step in this tutorial is to create an HTML document that has a form in it. However, we also need to create a CSS document that will provide styles for this HTML page, as well as a Javascript document that will hold our JavaScript functions. It is important to create these external documents so that our code does not go into the actual HTML page. I will be calling my files index.htm&, styles.css, and scripts.js.

Now let’s build our HTML page. We will do a very simple form to demonstrate how to hide certain elements. Before that, let’s create the head section of our HTML document and link in our external files:

<code>&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;title&gt;Javascript Tutorial&lt;/title&gt;
&lt;link href="styles.css" rel="stylesheet" type="text/css" media="screen" /&gt;
&lt;script language="JavaScript" type="text/javascript" src="scripts.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
</code>

As you can see, I have included a link to the stylesheet as well as a reference to our external script document. Now let’s add a simple form into the body of our document. I will be simplifying this form to concentrate on the Javascript, but you can add more form fields as needed:

<code>&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;title&gt;Javascript Tutorial&lt;/title&gt;
&lt;link href="styles.css" rel="stylesheet" type="text/css" media="screen" /&gt;
&lt;script language="JavaScript" type="text/javascript" src="scripts.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form&gt;
&lt;p&gt;Billing Address: &lt;input name="bill_address" type="text" id="bill_address" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;input name="ship_toggle" type="checkbox" id="ship_toggle" value="checkbox" /&gt; My shipping address is different than my billing address.&lt;/p&gt;
&lt;div&gt;
&lt;p&gt;Shipping Address: &lt;input name="ship_address" type="text" id="ship_address" /&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;&lt;input type="submit" name="Submit" value="Submit" /&gt;&lt;/p&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code>

As you can see, not the prettiest form in the world. However, we have the basics. We have a billing address field, which represents the section of the form that will be visible at all times. We then have a checkbox so that the user can enter a different shipping address than their billing address. Below that, we have the input area for the billing address, which represents the section of the form that will toggle visibility (notice that section is contained in a div element). Finally, we have a Submit button at the end of the form.

The goal here is to make the field for “shipping address” invisible when the user first gets to the form. After all, it is only needed if there is a different shipping address, otherwise it is simply taking up space. So let’s apply some styles to this page to get it to do just that. First, I need to assign an ID to our invisible section, which I will call “toggle”. Change the div tag to read:

<code>&lt;div id="toggle"&gt;
</code>

and we are done. Now let’s make a style declaration in our stylesheet that will make this section invisible when the page loads in a browser. Put the following style declaration into our styles.css document:

<code>#toggle {
display: none;
}
</code>

If you preview the HTML document, you will notice that the second input text field does not appear. That is our goal, however, we want it to appear if the user checks the box indicating that they have a different shipping address. To do this we will need to write a JavaScript function that will be called whenever the checkbox is clicked. Open up our scripts.js document and put the following in it:

<code>function toggle(targetId, sourceId) {
target = document.getElementById(targetId);
if (sourceId.checked){
target.style.display = "block";
} else {
target.style.display = "none";
}
}
</code>

Let’s go through this and see what we are doing. First, we define a function called “toggle” which will be expecting two variables to be passed to it- the targetId, and the sourceId. We pass these variables to the function rather than coding them inside the function so that we can use it in many places if we would like. By simply passing a different targetId or sourceId we can change the behavior of the function.

Next we define a variable called target, which gets the element in our HTML document with the id that matches the targetId variable passed to the function. We will end up passing the id of the div element that we want to toggle, as it is the target of this function (since the function will be acting on it). Next, we have an “if” statement that looks at the checkbox. This statement checks to see if the checkbox is checked or un-checked. Again we are passing the id of the checkbox to the function, identified by sourceID.

The “if” statement declares that if the checkbox is checked, then display the targetId element by assigning it’s CSS display property to block. However, if the checkbox is not checked, then hide the targetId element by assigning it’s CSS display property to none, as it was when the page first loaded in. This seems easy enough, and in fact that was the hardest part.

The last thing that we need to do is to call that JavaScript function when the checkbox is clicked. There is an event handler called the onclick handler that allows us to assign functions to it. Essentially we are saying that whenever someone clicks this checkbox, run this JavaScript function. So let’s add this to the checkbox HTML code, by making the following changes:

<code>&lt;input name="ship_toggle" type="checkbox" id="ship_toggle" value="checkbox" onclick="toggle('toggle', this);" /&gt;
</code>

As you can see, we have added the onclick event handler, which tells the browser to run the toggle() function. You will also notice that I have passed the variables needed to the function. Since thediv element that we want to toggle has an id of “toggle”, we put that in the first variable spot (the one for targetId). Notice that the value is in single quotes to denote that it is a string value. We want the sourceId (the checkbox that is evaluated in the function) to be this same checkbox, so we pass this to the function. This value is not inside single quotes because we are passing an object identifier, and not a string, to the function. Don’t worry if that doesn’t make sense.

Upload these files and preview in a browser, and you should see a very simple form with a checkbox that toggles the shipping addesss section. Experiment with different elements to get the results that you are looking for.

If you have any questions or comments about this tutorials, please visit our contact page.