Quick accordion list with jQuery

2010-02-04T13:19:00.000-08:00

Check out the 3 line simple accordion with jquery (so don't forget to include jquery 1.4 in your project)

HTML markup

<dt class="hiddenList-target">heading 1</dt>
  <dd class="hiddenList">  
   <ul>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
   </ul>
  </dd>
  
<dt class="hiddenList-target">heading 2</dt>
  <dd class="hiddenList">  
   <ul>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
   </ul>
  </dd>

The base CSS

.hiddenList-target
 { cursor:pointer; font-weight:700; margin-bottom:20px; }
 
.hiddenList
 { margin-bottom:20px; display:none;}
 
 .hiddenList li
  { list-style:disc; list-style-position:inside; margin-left:10px; }

The javascript

/* cache dom into vars */
var hiddenListTargets = $(".hiddenList-target");
var hiddenLists = $(".hiddenList");

/* accordion */
hiddenListTargets.click( function(){
 hiddenLists.not(this).slideUp(400);
 $(this).next(".hiddenList").stop().slideToggle(400);
});

jQuery Message Logging & Debugging

2010-01-22T10:03:00.000-08:00

Below is a helpful bit of code: My jquery solution to debugging / logging. It came up out of necessity really... necessity because I was tired of having to remember to pull my logging info out of the page before previewing in IE(which does not allow console). Instead of having to deal with the hassle, my script allows for enabling logging, then detecting if console is present.

This is helpful for someone who may want an inside look about what is happening behind the scenes in your app. Warnings and info are always helpful when trying to figure out what a previous developer did without having to search through code.

/**
* $.log(m, x)
* @author Russell Madsen russell [at] madsendev.com
* @version Jan.2010
* @url http://www.madsendev.com/
*
* @param m: The message you are wanting to log - it 
*           could be an object, or string
* @param x: The logging classification
*/

// set to false for production 
//    this can be located away from the function 
//    like in the initialization of the app.
var logger = true;

$.log = function(m, x){
//if logging is enabled, allow user to log messages
if (!logger) {return false;}  
else if('console' in window && console.debug) {   
// Actions for console enabled browsers:
switch(x){
case  'debug':console.debug(m);break;
case  'error':console.error(m);break;
case  'info': console.info(m);break;
case  'warn': console.warn(m);break;
default:  console.log(m); break;
}
} else {
// Actions for browsers without console:
// I don't like logging to alerts, but its definitely 
//      a necessity sometimes
// alert(m);
}
}

/*
* Implementation : use the appropriate type of logging, 
* or be lazy and use no logging classification to fall 
* back to the default
*/ 
$.log('debug test', 'debug' );
$.log('error test', 'error' );
$.log('info test', 'info' );
$.log('warn test', 'warn' );
$.log('log test with argument', 'log' );
$.log('log test without argument');

talk-n

Quick accordion list with jQuery

jQuery Message Logging & Debugging