Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Mottie (MVP) 4/1/2011 1:40 PM EST : Generic Information Accordion
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Generic Information Accordion

This information box can display anything you want. It is based off of the generic progression box and the forum post menu on the Home page of my Help Site (but without the information loading).



Code
<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>
Customizing
  • 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).
Edit: Changed the CSS and HTML a tiny bit to make the markup valid.
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%