Hide / show content with select list

This code will allow you to hide/show content by making a selection from a drop-down/select list.

Here's what it does:

Text will change here:

There are a few things going on here that need to be explained. This is accomplished through jQuery. To load the jQuery library, this line must appear in your tag:


<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
<script type="text/javascript">
function changeDemo()
{
var textToLoad = $('#demo').val();
$("#selectedData").find("div:visible").hide();
$("#"+textToLoad ).show();
}
</script>

Here's the associated select list:

<div id="selectedData">
<div id="one" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis erat ut lectus vestibulum sit amet tincidunt sapien interdum. Integer scelerisque auctor sagittis. Maecenas imperdiet lobortis justo at laoreet. Curabitur hendrerit laoreet neque, ut fringilla eros ullamcorper quis.</div>
<div id="two" style="display:none">Nam euismod dapibus risus, at viverra magna posuere sed. Maecenas convallis, augue vel varius semper, elit tortor mattis nisi, quis tempor nunc mi sed purus. Nulla vitae leo ut felis molestie lacinia id at orci. Suspendisse potenti. Ut accumsan est nec lectus malesuada tristique.</div>
<div id="three" style="display:none">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam bibendum arcu vel dui vehicula semper. Aliquam nec lectus quis libero elementum mollis at sit amet nibh. Pellentesque risus magna, imperdiet dictum lobortis nec, adipiscing a lacus.</div>
</div>

What makes it work?

The key is this line:

var textToLoad = $('#demo').val();

#demo is the id of the select list. .val() returns the value of the option selected. This is what determines the div that will be shown.

There are some simple switches you can add, such as slow and fast, to control the speed of the animations.

Slow example:

Text to animate:

Fast example:

Text to animate:

If you liked this post, buy me a cup of coffee.
»