Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Custom Widgets > Generic Information Accordion
Mottie (SuperAdmin) 4/1/2011 12:56 PM EST : Generic Information Accordion
ACK!
Mottie
Posts: 3884

1
Like

0
Dislike

Generic Information Accordion

GuildPortal admin site link to original post

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.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

cajkan (Member) 4/1/2011 3:19 PM EST : RE: Generic Information Accordion

cajkan
Posts: 6

0
Like

0
Dislike

what can i say :

" THE ONE AND ONLY "

MOTTIE THE BEST

THANKS A BILION BRO

Characters: mitko CajkanHoly
TopBottom

cajkan (Member) 4/2/2011 12:34 AM EST : RE: Generic Information Accordion

cajkan
Posts: 6

0
Like

0
Dislike

hey mottie

i have an idea for Updated " Generic Information Accordion "

how abbout adding Proffesion Icons 
and adding to Players Link to the Armory ???

is it posible to add that pls 

Characters: mitko CajkanHoly
TopBottom

Mottie (SuperAdmin) 4/2/2011 1:00 AM EST : RE: Generic Information Accordion
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi Cajkan!

You can just add the image in with the header... something like this:
<h3 class="head"><img src="alchemy.gif"> Alchemy</h3>
As for player links, you'll have to add those manually.. there is no shortcut for that.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

jgatling09 (Member) 5/19/2011 7:12 PM EST : RE: Generic Information Accordion

jgatling09
Posts: 9

0
Like

0
Dislike

So I'm using Guild Launch and wondering if the HTML script between guild portal and guild launch are different. I got a few guild launch html/css widgets working but I cannot get the drop down to work. Once I move my mouse over the text and click on it, no drop down list comes up.

TopBottom

Mottie (SuperAdmin) 5/19/2011 7:35 PM EST : RE: Generic Information Accordion
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi jgatling09!

I think GuildLaunch uses prototype instead of jQuery, so I think this code just needs jQuery loaded and all "$" changed to "jQuery" then it should start working. If I'm wrong, then hollar at me and I'll have a closer look.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

jgatling09 (Member) 5/20/2011 11:36 PM EST : RE: Generic Information Accordion

jgatling09
Posts: 9

0
Like

0
Dislike

I did some research myself and still couldn' t make it work. Switching it "$" to "Jquery" didnt work.

TopBottom

Mottie (SuperAdmin) 5/21/2011 12:09 PM EST : RE: Generic Information Accordion
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi jgatling09!

Ok, I checked it out, GuildLaunch uses Scriptalicious, which I have no clue how to use. But after changes all the "$" to "jQuery", just load jQuery and set the noConflict variable. Here is the code to replace at the end of the code posted above.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
 jQuery('#listgroup h3').click(function(){
  var active = jQuery(this).html();
  jQuery(this).toggleClass('selected').next().toggle(300);
  jQuery('#listgroup h3').each(function(){
   if (jQuery(this).html()!=active) {
    jQuery(this).removeClass('selected').next().hide(300);
   }
  })
 }).next().hide();
});
</script>
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

jgatling09 (Member) 5/21/2011 2:12 PM EST : RE: Generic Information Accordion

jgatling09
Posts: 9

0
Like

0
Dislike

Thank you very much <3. I did so much research trying to make it all prototype at first. I tried googling what HTML code GuildLaunch uses but I guess I didn't search to well. xD

TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%