Accordion Style Menu Block

[iGate]

hi all.

i have implemented this code successfully. what i want to do now is display it without a block title or frame. i want to do this so that the menu is the same width as the other blocks, thus it looks as if it is a block. However if you take away the frame u loose the background colour and instead it become transparent and one sees the forum bg colour.

in my case the block bg is #343434 and my forum bg is #000000. when i take away the frame by code gets a black bg instead of grey.

my question is, is there a way to give the links (not the sub-menu headers) a bg colour.

this is a link to my site: http://ihf.lp.pl/index.php

im using this code:

Code Select Expand

////////////////////////////////////////////////////
// ALL USERS  -  Including Guests
////////////////////////////////////////////////////
echo '
<div id="accordion">
<h3 class="toggler atStart">Navigation</h3>
<div class="element atStart">';
echo'
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'"> Home</a><br />
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=forum"> Forum</a><br />
                                <img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=gallery"> Gallery</a><br />
                                <img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=search"> Search</a><br />
</div>
</div>';
////////////////////////////////////////////////////
// =IHF= MEMBERS ONLY  -  (group 9)
////////////////////////////////////////////////////
if (in_array(1,2,14,12, $user_info['groups']) || $context['user']['is_admin']){
echo '
<div id="accordion">
<h3 class="toggler atStart">User Menu</h3>
<div class="element atStart">';
echo'
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=pm"> Personal Messages</a><br />
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=pm;sa=send"> Send PM</a><br />
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=profile"> Profile</a><br />
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;dl=upload"> Upload File</a><br />
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=gallery;sa=add"> Upload Images</a><br />
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;sa=submitarticle"> Submit an Article</a><br />
                                 <img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;dl=0"> Download Centre</a><br />
</div>
</div>';
}
////////////////////////////////////////////////////
// ALL USERS  -  Including Guests
////////////////////////////////////////////////////
echo '
<div id="accordion">
<h3 class="toggler atStart">Rosters</h3>
<div class="element atStart">';
echo'
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=27"> Clan Members</a><br />
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=13"> Clan Stats</a><br />
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=12"> Recruits Stats</a><br />
</div>
</div>';
////////////////////////////////////////////////////
// ALL USERS  -  Including Guests (TOOLS)
////////////////////////////////////////////////////
echo '
<div id="accordion">
<h3 class="toggler atStart">Tools</h3>
<div class="element atStart">';
echo'
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="http://ihf.lp.pl/index.php?page=26" target="_blank"> World Clock</a><br>
</div>
</div>';
////////////////////////////////////////////////////
// FORMS
////////////////////////////////////////////////////
if ($context['user']['is_logged']){
echo '
<div id="accordion">
<h3 class="toggler atStart">Forms</h3>
<div class="element atStart">';
echo'
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=7"> Clan Application</a><br />
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=11"> Clan Battle Request</a><br />
</div>
</div>';
}
if ($context['user']['is_guest']){
echo '
<div id="accordion">
<h3 class="toggler atStart">Forms</h3>
<div class="element atStart">';
echo'
--Registration Required--<br />
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa2.bmp" /> Clan Application</a><br />
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa2.bmp" /> Clan Battle Request</a><br />
--Registration Required--<br />
</div>
</div>';
}
////////////////////////////////////////////////////
// ALL USERS  -  Including Guests
////////////////////////////////////////////////////
echo '
<div id="accordion">
<h3 class="toggler atStart">Other Sites</h3>
<div class="element atStart">';
echo'
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="http://www.americasarmy.com" target="_blank"> Americas Army</a><br />
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="ftp://ftp.free.fr/mirrors/AmericasArmy/americasarmy.html" target="_blank"> Download AA</a><br />
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="http://www.aaotracker.com" target="_blank"> AAO Tracker</a><br />
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="http://www.draat.net" target="_blank"> drAAt Tracker</a><br />
</div>
</div>';
////////////////////////////////////////////////////
// ALL USERS  -  Including Guests
////////////////////////////////////////////////////
echo '
<div id="accordion">
<h3 class="toggler atStart">Servers</h3>
<div class="element atStart">';
echo'
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=19"> Fort Apache Squad</a><br />
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=17"> Nifty Melbourne</a><br />
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=18"> GSS^ Server</a><br />
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=15"> Obitus Clan</a><br />
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=16"> FLS Clan Server</a><br />
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=20"> =IHF= Server [AU]</a><br />
                                <img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=14"> =IHF= Server [PL]</a><br />
</div>
</div>';
////////////////////////////////////////////////////
// ADMIN ONLY
////////////////////////////////////////////////////
if ($context['user']['is_admin']){
echo '
<div id="accordion">
<h3 class="toggler atStart">Administrator</h3>
<div class="element atStart">';
echo'
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=admin"> Admin Panel</a><br />
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=gallery;sa=admin"> Gallery Admin Panel</a><br />
<img height="15" width="15" alt="" src="http://ihf.lp.pl/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=awards"> Awards Admin Panel</a><br />
</div>
</div>';
}

[Dragooon]

In the JS you edit at index.template

Code Select Expand

onActive: function(toggler, element){
toggler.setStyle(\'color\', \'#ff3300\');
},

onBackground: function(toggler, element){
toggler.setStyle(\'color\', \'#222\');
}
Try replacing it with

Code Select Expand


onActive: function(toggler, element){
toggler.setStyle(\'color\', \'#ff3300\');
                element.setStyle(\'background\', \'#000000\');
},

onBackground: function(toggler, element){
toggler.setStyle(\'color\', \'#222\');
                element.setStyle(\'background\', \'#000000\');
}
In both element.setStyle(\'background\', \'#000000\'); replace the 0's with the Hex color code you need.

Now I am not a pro at JS(I know nothing about JS), neither I digged deep into this snippet so not sure if this will work or not

[iGate]

no that didn't work. what happened though was that the whole accordion effect was ruined.

[sgilleland]

I just went thru the directions and it doesn't seem to accordion (I am assuming that accordion mean shrinking and expanding when clicked??)  Am I doing something wrong, or is this how it is to look?

Here is the URL  www.sharemydreamz.com

Thanks!

[Dragooon]

Your JS file just got the few opening lines, re-download and re-upload it.

[sgilleland]

Super, that did it....thank you VERY much!

[sgilleland]

One last question, are you able to do these as a center block so they would go across the top? I see you can put them in the center but they are vertical....any way to make them horizontal?

Thanks

[Azphat12]

Hey there,

Got this block working, and have to say I like it.  I am using the code on the first page...not the php version.  I also had to hack it a little because I already had some code I wanted to use.  All in all it is working good. 

Here is my question, I am sure its simple and I am overlooking...

I found how to change the color of the headings or main categories or whatnot.  What I would really like is for it to use an image.  I would like it to use the image of all the other blocks with the bar and the collapse gif.  That way it looks like a collapsable menu.....which it is!

I just need to know what to add and where if possible.  My brain is mush right now, lol.

http://www.darkaftermath.org  (menu on left)