Using jQuery Dropdown to Display Select Content

Here is a technique that uses jQuery to reduce the length of web pages containing repetitive formatted information. You can use it to display images as seen below or information such as people profiles. This is flexible too because the HTML select tag can be organized into categories.

If JavaScript happens to be disabled, all of the div sections will be displayed but the pull down pick list will not.

Example

Sample Source Code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
  //<![CDATA[
  $(document).ready(function(){
    $('#categoryform').show();
    $('.box').hide();
    $('.first-box').show();
    $('#selectbox').focus();
    $('#selectbox').bind("keyup change", function(){
      $('.box').hide();
      $('#' + $('#selectbox').val()).show();
      return true;
    });
  });
  //]]>
</script>
<div style="width:80%;padding:20px;margin:0 auto;border:1px solid grey;">
<form id="categoryform" style="display:none;">
Select an image category: <select id="selectbox">
  <option value="Abstract">Abstract</option>
  <option value="Animals">Animals</option>
  <option value="Business">Business</option>
  <option value="Cats">Cats</option>
  <option value="City">City</option>
  <option value="Fashion">Fashion</option>
  <option value="Food">Food</option>
  <option value="Nature">Nature</option>
  <option value="Nightlife">Nightlife</option>
  <option value="People">People</option>
  <option value="Sports">Sports</option>
  <option value="Technics">Technics</option>
  <option value="Transport">Transport</option>
</select>
</form>
<div class="box first-box" id="Abstract">
<h3>Examples of Lorem Pixels - Abstract Category</h3>
<p><img src="http://lorempixel.com/400/200/abstract/" alt="sample image"><br />Sample image</p>
</div>
<div class="box" id="Animals">
<h3>Examples of Lorem Pixels - Animals Category</h3>
<p><img src="http://lorempixel.com/400/200/animals/" alt="sample image"><br />Sample image</p>
</div>
<div class="box" id="Business">
<h3>Examples of Lorem Pixels - Business Category</h3>
<p><img src="http://lorempixel.com/400/200/business/" alt="sample image"><br />Sample image</p>
</div>
<div class="box" id="Cats">
<h3>Examples of Lorem Pixels - Cats Category</h3>
<p><img src="http://lorempixel.com/400/200/cats/" alt="sample image"><br />Sample image</p>
</div>
<div class="box" id="City">
<h3>Examples of Lorem Pixels - City Category</h3>
<p><img src="http://lorempixel.com/400/200/city/" alt="sample image"><br />Sample image</p>
</div>
<div class="box" id="Food">
<h3>Examples of Lorem Pixels- Food Category</h3>
<p><img src="http://lorempixel.com/400/200/food/" alt="sample image"><br />Sample image</p>
</div>
<div class="box" id="Nightlife">
<h3>Examples of Lorem Pixels - Nightlife Category</h3>
<p><img src="http://lorempixel.com/400/200/nightlife/" alt="sample image"><br />Sample image</p>
</div>
<div class="box" id="Fashion">
<h3>Examples of Lorem Pixels - Fashion Category</h3>
<p><img src="http://lorempixel.com/400/200/fashion/" alt="sample image"><br />Sample image</p>
</div>
<div class="box" id="People">
<h3>Examples of Lorem Pixels - People Category</h3>
<p><img src="http://lorempixel.com/400/200/people/" alt="sample image"><br />Sample image</p>
</div>
<div class="box" id="Nature">
<h3>Examples of Lorem Pixels - Nature Category</h3>
<p><img src="http://lorempixel.com/400/200/nature/" alt="sample image"><br />Sample image</p>
</div>
<div class="box" id="Sports">
<h3>Examples of Lorem Pixels - Sports Category</h3>
<p><img src="http://lorempixel.com/400/200/sports/" alt="sample image"><br />Sample image</p>
</div>
<div class="box" id="Technics">
<h3>Examples of Lorem Pixels - Technics Category</h3>
<p><img src="http://lorempixel.com/400/200/technics/" alt="sample image"><br />Sample image</p>
</div>
<div class="box" id="Transport">
<h3>Examples of Lorem Pixels - Transport Category</h3>
<p><img src="http://lorempixel.com/400/200/transport/" alt="sample image"><br />Sample image</p>
</div>
To use Random images in your sample code, visit the <a href="http://lorempixel.com/">Lorem Pixel</a> website.
</div>