<style type="text/css">
/* Some list and link styling */
#listgroup { width: 200px; margin: 0; }
#listgroup li { width: 95%; list-style-type: none; margin: 0; }
#listgroup ul { margin-top: 5px; }
#listgroup ul li { width: 90%; border: 0px; margin: 2px auto; padding: 0 10px; }
#listgroup ul li:hover { background: #555; cursor: pointer; }
#listgroup span { float: right; }

/* Header links styling */
#listgroup h3 { border: 0; margin: 2px 0; padding: 4px; font-size: 100%; }
#listgroup h3.head { cursor: pointer; }
#listgroup h3.head:hover, #listgroup h3.selected { background: #555; }

/* A few IE bug fixes */
* ul,li { margin: 0; padding: 0; }
* html #listgroup li { height: 100%; list-style-type: none; }
* html #listgroup ul { margin-top:5px; }
* html #listgroup ul li { height: 100%; margin: 2px auto; }
* html #listgroup h3 { padding-right: 20px; }
</style>
<script type="text/javascript">
$(document).ready(function(){
 $('#listgroup h3').click(function(){
     var active = $(this).html();
  $(this).toggleClass('selected').next().toggle(300);
  $('#listgroup h3').each(function(){
   if ($(this).html()!=active) {
    $(this).removeClass('selected').next().hide(300);
   }
  })
 }).next().hide();
});
</script>

<div id="listgroup">

 <h3 class="head">Alchemy</h3>
 <ul style="display: none;">
  <li>Name 1<span>525</span></li>
  <li>Name 2<span>525</span></li>
  <li>Name 3<span>525</span></li>
 </ul>

 <h3 class="head">Blacksmithing</h3>
 <ul style="display: none;">
  <li>Name 1<span>525</span></li>
  <li>Name 2<span>525</span></li>
  <li>Name 3<span>525</span></li>
 </ul>

 <h3 class="head">Enchanting</h3>
 <ul style="display: none;">
  <li>Name 1<span>525</span></li>
  <li>Name 2<span>525</span></li>
  <li>Name 3<span>525</span></li>
 </ul>

 <h3 class="head">Engineering</h3>
 <ul style="display: none;">
  <li>Name 1<span>525</span></li>
  <li>Name 2<span>525</span></li>
  <li>Name 3<span>525</span></li>
 </ul>

 <h3 class="head">Inscription</h3>
 <ul style="display: none;">
  <li>Name 1<span>525</span></li>
  <li>Name 2<span>525</span></li>
  <li>Name 3<span>525</span></li>
 </ul>

 <h3 class="head">Jewelcrafting</h3>
 <ul style="display: none;">
  <li>Name 1<span>525</span></li>
  <li>Name 2<span>525</span></li>
  <li>Name 3<span>525</span></li>
 </ul>

 <h3 class="head">Mining</h3>
 <ul style="display: none;">
  <li>Name 1<span>525</span></li>
  <li>Name 2<span>525</span></li>
  <li>Name 3<span>525</span></li>
 </ul>

 <h3 class="head">Tailoring</h3>
 <ul style="display: none;">
  <li>Name 1<span>525</span></li>
  <li>Name 2<span>525</span></li>
  <li>Name 3<span>525</span></li>
 </ul>

</div>

• CSS

• Adjust the width by changing the "#listgroup" width (in red).
• Adjust the header and selected colors by changing the color values in blue.
  
  
• Contents
  
  
  • Follow this basic template:
    
     <h3 class="head">TITLE</h3>
     <ul style="display: none;">
      <li>LIST ITEM 1</li>
      <li>LIST ITEM 2</li>
      <li>LIST ITEM 3</li>
     </ul>
    
    
  • The Header content is in orange. You can replace it with text and/or include an image.
  • The list content is in blue. I've included some additional css to float anything inside a <span> to the right (in the code, not in the basic template).