Accordion Style Menu Block

Hairy · October 26, 2007, 06:49:11 AM

But the version (php) I am already using is the newest version you posted a few days ago. Is there a problem with it? seems to work perfectly for me how it is.

If the example you just posted is the best way then I'll change it ASAP but still I can't work out how to change the background (windowbg)

I allready have the colors changed and font for menu title and it's awesome

Also I am using other code with it that displays certain menu items to certain groups and not to others, here is the full code I am working with :laugh: :

Code Select

global $context, $settings, $options, $scripturl, $txt, $user_info, $modSettings;

// The Style.css and the Javascripts.
echo '
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">


.toggler {
	color: #ffffff;
	margin: 0;
	padding: 2px 5px;
	background: #0a0908;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-top: 1px solid #f5f5f5;
	border-left: 1px solid #f5f5f5;
	font-size: 15px;
	font-weight: bold;
	font-family: \'Andale Mono\', Comic Sans MS;
}
 
.element {
 
}
 
.element p {
	margin: 0;
	padding: 4px;
}
 
.float-right {
	padding:10px 20px;
	float:right;
}
 
blockquote {
	text-style:italic;
	padding:5px 0 5px 30px;
}


</style>
<script type="text/javascript" src="mootools-accordion.js"></script>

<script type="text/javascript">
window.onload = function() {
var accordion = new Accordion(\'h3.atStart\', \'div.atStart\', {
	opacity: false,
	onActive: function(toggler, element){
		toggler.setStyle(\'color\', \'#ff3300\');
	},
 
	onBackground: function(toggler, element){
		toggler.setStyle(\'color\', \'#ffffff\');
	}
}, $(\'accordion\'));

}
</script>
</head>
<body>';
//Now the actual Blocks begain
////////////////////////////////////////////////////
// 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="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'"> Home</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=forum"> Forum</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=search"> Search</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=search;advanced"> Advanced Search</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=Messing%20with%20Samsquanch"> Samsquanch Video</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=Links"> Links</a><br />
 </div>
</div>';
////////////////////////////////////////////////////
// SAMS MEMBERS ONLY  -  (group 9)
////////////////////////////////////////////////////
if (in_array(9, $user_info['groups']) || $context['user']['is_admin']){
echo ' 
<div id="accordion">
<h3 class="toggler atStart">SAMS MENU</h3>
 <div class="element atStart">';
	echo'
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;dl=item19"> Tag Registration File</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;dl=upload"> Upload File</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;sa=submitarticle"> Submit Article</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="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=10"> Squads</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=18"> Other</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="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=7"> Clan Application</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=23"> 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="/vacancies/images/aa2.bmp" /> Clan Application</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa2.bmp" /> Battle Request</a><br />
 </div>
</div>';
}
////////////////////////////////////////////////////
// DOWNLOADS
////////////////////////////////////////////////////
if ($context['user']['is_logged']){
echo ' 
<div id="accordion">
<h3 class="toggler atStart">DOWNLOADS</h3>
 <div class="element atStart">';
	echo'
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;dl=0"> Download Centre</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;dl=item14"> TeamSpeak</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;dl=item15"> TeamSpeak Update</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;dl=item16"> TeamSpeak Overlay</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;dl=item4"> KeyOps</a><br />
 </div>
</div>';
}
if ($context['user']['is_guest']){
echo ' 
<div id="accordion">
<h3 class="toggler atStart">DOWNLOADS</h3>
 <div class="element atStart">';
	echo'
				----Registration Required----<br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa2.bmp" /> Download Centre</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa2.bmp" /> TeamSpeak</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa2.bmp" /> TeamSpeak Update</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa2.bmp" /> TeamSpeak Overlay</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa2.bmp" /> KeyOps</a><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="/vacancies/images/aa1.bmp" /><a href="http://www.americasarmy.com" target="_blank"> Americas Army</a><br />
				<img height="15" width="15" alt="" src="/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="/vacancies/images/aa1.bmp" /><a href="http://www.gameservers.com/?ref=1611810" target="_blank"> GameServers</a><br />
 </div>
</div>';
////////////////////////////////////////////////////
// ADMIN ONLY
////////////////////////////////////////////////////
if ($context['user']['is_admin']){
echo ' 
<div id="accordion">
<h3 class="toggler atStart">ADMIN</h3>
 <div class="element atStart">';
	echo'
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=admin"> Admin Panel</a><br />
 </div>
</div>';
}
echo ' 
<div id="accordion">
<h3 class="toggler atStart">NOTHING HERE</h3>
 <div class="element atStart">';
	echo'
               Told You!
 </div>
</div>
</body>
</html>';

Dragooon · October 26, 2007, 06:58:38 AM

Quote from: Hairy on October 26, 2007, 06:49:11 AM
But the version (php) I am already using is the newest version you posted a few days ago. Is there a problem with it? seems to work perfectly for me how it is.

If the example you just posted is the best way then I'll change it ASAP but still I can't work out how to change the background (windowbg)

I allready have the colors changed and font for menu title and it's awesome

Also I am using other code with it that displays certain menu items to certain groups and not to others, here is the full code I am working with :laugh: :

Code Select Expand
global $context, $settings, $options, $scripturl, $txt, $user_info, $modSettings; // The Style.css and the Javascripts. echo ' <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .toggler { color: #ffffff; margin: 0; padding: 2px 5px; background: #0a0908; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; border-top: 1px solid #f5f5f5; border-left: 1px solid #f5f5f5; font-size: 15px; font-weight: bold; font-family: \'Andale Mono\', Comic Sans MS; } .element { } .element p { margin: 0; padding: 4px; } .float-right { padding:10px 20px; float:right; } blockquote { text-style:italic; padding:5px 0 5px 30px; } </style> <script type="text/javascript" src="mootools-accordion.js"></script> <script type="text/javascript"> window.onload = function() { var accordion = new Accordion(\'h3.atStart\', \'div.atStart\', { opacity: false, onActive: function(toggler, element){ toggler.setStyle(\'color\', \'#ff3300\'); }, onBackground: function(toggler, element){ toggler.setStyle(\'color\', \'#ffffff\'); } }, $(\'accordion\')); } </script> </head> <body>'; //Now the actual Blocks begain //////////////////////////////////////////////////// // 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="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'"> Home</a><br /> <img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=forum"> Forum</a><br /> <img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=search"> Search</a><br /> <img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=search;advanced"> Advanced Search</a><br /> <img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=Messing%20with%20Samsquanch"> Samsquanch Video</a><br /> <img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=Links"> Links</a><br /> </div> </div>'; //////////////////////////////////////////////////// // SAMS MEMBERS ONLY - (group 9) //////////////////////////////////////////////////// if (in_array(9, $user_info['groups']) || $context['user']['is_admin']){ echo ' <div id="accordion"> <h3 class="toggler atStart">SAMS MENU</h3> <div class="element atStart">'; echo' <img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;dl=item19"> Tag Registration File</a><br /> <img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;dl=upload"> Upload File</a><br /> <img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;sa=submitarticle"> Submit Article</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="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=10"> Squads</a><br /> <img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=18"> Other</a><br /> </div> </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="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=7"> Clan Application</a><br /> <img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=23"> 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="/vacancies/images/aa2.bmp" /> Clan Application</a><br /> <img height="15" width="15" alt="" src="/vacancies/images/aa2.bmp" /> Battle Request</a><br /> </div> </div>'; } //////////////////////////////////////////////////// // DOWNLOADS //////////////////////////////////////////////////// if ($context['user']['is_logged']){ echo ' <div id="accordion"> <h3 class="toggler atStart">DOWNLOADS</h3> <div class="element atStart">'; echo' <img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;dl=0"> Download Centre</a><br /> <img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;dl=item14"> TeamSpeak</a><br /> <img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;dl=item15"> TeamSpeak Update</a><br /> <img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;dl=item16"> TeamSpeak Overlay</a><br /> <img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;dl=item4"> KeyOps</a><br /> </div> </div>'; } if ($context['user']['is_guest']){ echo ' <div id="accordion"> <h3 class="toggler atStart">DOWNLOADS</h3> <div class="element atStart">'; echo' ----Registration Required----<br /> <img height="15" width="15" alt="" src="/vacancies/images/aa2.bmp" /> Download Centre</a><br /> <img height="15" width="15" alt="" src="/vacancies/images/aa2.bmp" /> TeamSpeak</a><br /> <img height="15" width="15" alt="" src="/vacancies/images/aa2.bmp" /> TeamSpeak Update</a><br /> <img height="15" width="15" alt="" src="/vacancies/images/aa2.bmp" /> TeamSpeak Overlay</a><br /> <img height="15" width="15" alt="" src="/vacancies/images/aa2.bmp" /> KeyOps</a><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="/vacancies/images/aa1.bmp" /><a href="http://www.americasarmy.com" target="_blank"> Americas Army</a><br /> <img height="15" width="15" alt="" src="/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="/vacancies/images/aa1.bmp" /><a href="http://www.gameservers.com/?ref=1611810" target="_blank"> GameServers</a><br /> </div> </div>'; //////////////////////////////////////////////////// // ADMIN ONLY //////////////////////////////////////////////////// if ($context['user']['is_admin']){ echo ' <div id="accordion"> <h3 class="toggler atStart">ADMIN</h3> <div class="element atStart">'; echo' <img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=admin"> Admin Panel</a><br /> </div> </div>'; } echo ' <div id="accordion"> <h3 class="toggler atStart">NOTHING HERE</h3> <div class="element atStart">'; echo' Told You! </div> </div> </body> </html>';

Yes, You should change it.
Make the edits to index.template.php and style.css and use this kind of code in a PHP Block.

Code Select

echo ' 
<div id="accordion">
<h3 class="toggler atStart">NOTHING HERE</h3>
 <div class="element atStart">';
	echo'
               Told You!
 </div>
</div>';

For the edits, See the 1st post.

Hairy · October 26, 2007, 07:03:49 AM

Thanks :up:

iGate · October 26, 2007, 04:13:42 PM

well i tried all i could and i couldn't get it to work. in the end i just copied the latest code that Hairy provided, and IT WORKED!!

only thing now is that i want it to look natural with my forum theme

lebisol · October 26, 2007, 04:23:33 PM

at the bottom of the post http://www.tinyportal.net/index.php?topic=19485.msg160256#msg160256
he explained what to do about coloring schema.
If you are not that crafty with css then get the free utility:
I prefer topstyle:
http://topstyle.en.softonic.com/download
but there is this:
http://www.blumentals.net/csstool/
although there are many other outhere fairly inexpensive if you care for them...
All the best!

Dragooon · October 26, 2007, 04:25:49 PM

Quote from: iGate on October 26, 2007, 04:13:42 PM
well i tried all i could and i couldn't get it to work. in the end i just copied the latest code that Hairy provided, and IT WORKED!!

only thing now is that i want it to look natural with my forum theme

It didn't worked because you were using

Code Select

<div class="accordion">
<h3 class="toggler atStart">IHF 1</h3>
	<div class="element atStart">
This is the description for IHF 1
</div>
</div>
<div class="accordion">
<h3 class="toggler atStart">IHF 2</h3>
	<div class="element atStart">
This is the description jfdjhfor IHF 1
</div>
</div>

which was totally wrong.
This is the correct one

Code Select

<div class="accordion">
<h3 class="toggler atStart">IHF 1</h3>
	<div class="element atStart">
This is the description for IHF 1
</div>

<h3 class="toggler atStart">IHF 2</h3>
	<div class="element atStart">
This is the description jfdjhfor IHF 1
</div>
</div>

But glad you got it working.
Now About the CSS part, Lebisol answered you

.

Hairy · October 27, 2007, 01:43:20 AM

iGate, If you like the code I'm using then you should use the most recent version. I have made the appropriate modifications Dragoon mentioned and it works nicely :coolsmiley:

Make the modifications mentioned on the first post for index.template.php and style.css (I believe you have already done so already iGate but in case someone else is following this):

And the updated code I am using for the PHP block:

Code Select

////////////////////////////////////////////////////
// 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="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'"> Home</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=forum"> Forum</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=search"> Search</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=search;advanced"> Advanced Search</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=Messing%20with%20Samsquanch"> Samsquanch Video</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=Links"> Links</a><br />
 </div>
</div>';
////////////////////////////////////////////////////
// SAMS MEMBERS ONLY  -  (group 9)
////////////////////////////////////////////////////
if (in_array(9, $user_info['groups']) || $context['user']['is_admin']){
echo ' 
<div id="accordion">
<h3 class="toggler atStart">SAMS MENU</h3>
 <div class="element atStart">';
	echo'
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;dl=item19"> Tag Registration File</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;dl=upload"> Upload File</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;sa=submitarticle"> Submit Article</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="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=10"> Squads</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=18"> Other</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="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=7"> Clan Application</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=23"> 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="/vacancies/images/aa2.bmp" /> Clan Application</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa2.bmp" /> Battle Request</a><br />
				-----Registration Required-----<br />
 </div>
</div>';
}
////////////////////////////////////////////////////
// DOWNLOADS
////////////////////////////////////////////////////
if ($context['user']['is_logged']){
echo ' 
<div id="accordion">
<h3 class="toggler atStart">DOWNLOADS</h3>
 <div class="element atStart">';
	echo'
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;dl=0"> Download Centre</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;dl=item14"> TeamSpeak</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;dl=item15"> TeamSpeak Update</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;dl=item16"> TeamSpeak Overlay</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=tpmod;dl=item4"> KeyOps</a><br />
 </div>
</div>';
}
if ($context['user']['is_guest']){
echo ' 
<div id="accordion">
<h3 class="toggler atStart">DOWNLOADS</h3>
 <div class="element atStart">';
	echo'
				-----Registration Required-----<br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa2.bmp" /> Download Centre</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa2.bmp" /> TeamSpeak</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa2.bmp" /> TeamSpeak Update</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa2.bmp" /> TeamSpeak Overlay</a><br />
				<img height="15" width="15" alt="" src="/vacancies/images/aa2.bmp" /> KeyOps</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="/vacancies/images/aa1.bmp" /><a href="http://www.americasarmy.com" target="_blank"> Americas Army</a><br />
				<img height="15" width="15" alt="" src="/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="/vacancies/images/aa1.bmp" /><a href="http://www.gameservers.com/?ref=1611810" target="_blank"> GameServers</a><br />
 </div>
</div>';
////////////////////////////////////////////////////
// ADMIN ONLY
////////////////////////////////////////////////////
if ($context['user']['is_admin']){
echo ' 
<div id="accordion">
<h3 class="toggler atStart">ADMIN</h3>
 <div class="element atStart">';
	echo'
				<img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?action=admin"> Admin Panel</a><br />
 </div>
</div>';
}

And modify to suit your site.

ps. members really like this accordion menu

:up:

iGate · October 27, 2007, 02:52:31 AM

thank u hairy

if i am to understand correctly, in this version all styles and looks are edited in style.css?

unlike before when they could be edited through the actual block code.
__________

one last thing.

if u look at my menu (left blocks) http://test.ihf.lp.pl/forums/

u will see that the

tag is longer under the headings: "forms, links, downloads and admin"
how can i make it shorter like the other menu headings.

Hairy · October 27, 2007, 03:20:44 AM

Ok I have a question...

If I want a second menu block but I want the accordion effect to work independently to the first menu block (I don't want one to close up when the other is used) what editing is needed?

My only guess is a 2nd copy renamed "mootools-accordion2.js" and some code change probably also in "mootools-accordion2.js"

My brain is starting to smoke right now

iGate · October 27, 2007, 03:28:11 AM

i would like to do the above to.

Recent

User

Stats

Members

Stats

Users Online

Accordion Style Menu Block

Hairy

Dragooon

Hairy

iGate

lebisol

Dragooon

Hairy

iGate

Hairy

iGate

This website is proudly hosted on Crocweb Cloud Website Hosting.