Share via

jQuery in 6 minutes for short attention span people

  • Article
  Abstract for Video
  In just 6 minutes I want to illustrate using the basics of jQuery. The goal is to implement a basic accordion interface.
  Video Download Here
  The Goal
  To transform an otherwise boring data list into something interesting, using the accordion interface.
  image
  Code Snippets
  Snippet - Boring DataList <dl>
hyperlink2  

Source Code for boring web page in need of jQuery

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
 <html xmlns="https://www.w3.org/1999/xhtml">
 <head>
     <title>jQuery Sample</title>
  
 </head>
 <body>
  
 <dl>
     <dt><a href="#">Very Touristy Things</a></dt>
     <dd>
       <ul>
           <li><a href="https://www.getty.edu/museum/">J. Paul Getty Center</a></li>
           <li><a href="https://www.sixtaste.com/">6 Taste</a></li>
           <li><a href="https://www.hollywoodsign.org/">Hollywood Sign</a></li>
       </ul>
     </dd>
     <dt><a href="#">Day Trips</a></dt>
     <dd>
       <ul>
           <li><a href="https://www.laparks.org/venice/enter.htm">Venice Beach Boardwalk</a></li>
           <li><a href="https://www.dearlydepartedtours.com/">Dearly Departed</a></li>
           <li><a href="https://www.ocwildlifebeachtour.com">OC and Wildlife tour</a></li>
       </ul>
     </dd>
     <dt><a href="#">Hollywood-ish</a></dt>
     <dd>
       <ul>
           <li><a href="https://manntheatres.com">Chinese Theatre</a></li>
           <li><a href="https://en.wikipedia.org/wiki/Chateau_Marmont">Chateau Marmont</a></li>
       </ul>
     </dd>
 </dl>
  
 </body>
 </html>
  Snippet - Styles
hyperlink2  

Source Code for Styles

 
 <style type="text/css">
     
 dy { font-family: Arial; font-size: 16px; }
 dl { width: 300px; }
 dl,dd { margin: 0; }
 dt { background: #00f; font-size: 18px; padding: 5px; margin: 2px; }
 dt a { color: #FFF; }
 dd a { color: #000; }
 ul { list-style: none; padding: 5px; }
  
 </style>
  Snippet - jQuery script inclusion
hyperlink2  

Source Code for jQuery Inclusion

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
 <html xmlns="https://www.w3.org/1999/xhtml">
 <head>
     <title>jQuery Sample</title>
     <style type="text/css">
         
   body { font-family: Arial; font-size: 16px; }
     dl { width: 300px; }
     dl,dd { margin: 0; }
     dt { background: #00f; font-size: 18px; padding: 5px; margin: 2px; }
     dt a { color: #FFF; }
     dd a { color: #000; }
     ul { list-style: none; padding: 5px; }
  
     </style>
  
  
 </head>
 <body>
  
 <dl>
     <dt><a href="#">Very Touristy Things</a></dt>
     <dd>
       <ul>
           <li><a href="https://www.getty.edu/museum/">J. Paul Getty Center</a></li>
           <li><a href="https://www.sixtaste.com/">6 Taste</a></li>
           <li><a href="https://www.hollywoodsign.org/">Hollywood Sign</a></li>
       </ul>
     </dd>
     <dt><a href="#">Day Trips</a></dt>
     <dd>
       <ul>
           <li><a href="https://www.laparks.org/venice/enter.htm">Venice Beach Boardwalk</a></li>
           <li><a href="https://www.dearlydepartedtours.com/">Dearly Departed</a></li>
           <li><a href="https://www.ocwildlifebeachtour.com">OC and Wildlife tour</a></li>
       </ul>
     </dd>
     <dt><a href="#">Hollywood-ish</a></dt>
     <dd>
       <ul>
           <li><a href="https://manntheatres.com">Chinese Theatre</a></li>
           <li><a href="https://en.wikipedia.org/wiki/Chateau_Marmont">Chateau Marmont</a></li>
       </ul>
     </dd>
 </dl>
  
     <script type="text/javascript" 
         src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.1.js"></script>   1:     2:     3:     <script type="text/javascript">   4:     5:         // Once the DOM is loaded, then we are ready....   6:         $(document).ready(function () {   7:     8:             // Hide all but the first <dd>   9:             $("dd:not(:first)").hide();  10:    11:             $("dt a").click(function (e) {  12:                 e.preventDefault();  13:    14:                 // Hide what is visible. Do a "slideup"  15:                 $("dd:visible").slideUp("slow");  16:    17:                 // Now to slide down the clicked on link  18:                 $(this).parent().next().slideDown("slow");  19:             });  20:         });  21:    22:     </script>
  
 </body>
 </html>
 <script type="text/javascript" 
     src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.1.js"></script>
  Snippet - jQuery script to perform animations
hyperlink2  

Source Code for JavaScript

 
 <script type="text/javascript">   1:     2:     3:     // Once the DOM is loaded, then we are ready....   4:     $(document).ready(function () {   5:     6:         // Hide all but the first <dd>   7:         $("dd:not(:first)").hide();   8:     9:         $("dt a").click(function (e) {  10:             e.preventDefault();  11:    12:             // Hide what is visible. Do a "slideup"  13:             $("dd:visible").slideUp("slow");  14:    15:             // Now to slide down the clicked on link  16:             $(this).parent().next().slideDown("slow");  17:         });  18:     });  19:  </script>
Snippet – the Whole, Finished Page
hyperlink2  

Source Code for the finished page