TinyPortal

Here is the Accordion Style Menu Block. I made this as per of a request and it seems to be rocking :P.

---

For those who want to see this, I arranged a demo.
Demo : http://test.gforumx.com/smf1

---

This is found at http://mootools.net/ . I just posted a way of making it work in a Block. The code is much from there Example. This code is copyright to there respective holders(See The file for copyright).

---

Implementation:
Step 1 - Download the attached file (mootools-accordion.zip), extract it and file mootools-accordion.js should pop out. Upload it to your forum root, where you index.php and Settings.php exists

Step 2 - We have to make some small changes in some files,
Lets begin.
In Themes/<YourTheme>/index.template.php
Find </head>
Add Before
<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\', \'#222\');
}
}, $(\'accordion\'));

}
</script>
Now open /Themes/<Your theme>/style.css
And add at beginning
/* Accordion Style Menu Block */
.toggler {
color: #222;
margin: 0;
padding: 2px 5px;
background: #eee;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size: 11px;
font-weight: normal;
font-family: 'Andale Mono', sans-serif;
}

.element {

}

.element p {
margin: 0;
padding: 4px;
}

.float-right {
padding:10px 20px;
float:right;
}

blockquote {
padding:5px 0 5px 30px;
}

/* END! Accordion Style Menu Block */
And the edits are done

---

Adding/Managing menu items:
In a Scriptbox
Add this code
<div class="accordion">
<h3 class="toggler atStart">Item 1</h3>
<div class="element atStart">
Description 1
</div>
</div>
And do the respective changes
Change "Item 1" to what you want, Example "Object" and "Description 1" to a description
Example
<h3 class="toggler atStart">Test 1</h3>
<div class="element atStart">
This is a Test 1, if you want to know why, Don't ask me, This is not my fault, Hey after all this Is a test! :P
</div>
Make sure NOT to remove the <div class="accordion"> and the end </div>

Hard? Feel free to post here for Questions.
Mootools version : 1.11

Dragooon, you forgot to change our main link colors in your code when you looked at our source...

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

onBackground: function(toggler, element){
toggler.setStyle('color', '#707070');

Sorry about that, I must've copied wrong JavaScript while I was looking on how to do this.

good work man , thnx !!!

Nice Job.

Kool!

Thank you, definately considering this but if I could make one request.  It confused me at first by not showing itself as a link in you demos.  When I moved the mouse over top it was just like going over text without changing to the hand.

How would you add php? like say... recent messages?
Thanks!

Dragooon,
That is "very cool" and I appreciate the code.
However, I do not think I would use it on a website or forum that was not directed to technical-knowledgeable users because I am sure a lot of the browsing public would not know how to use it or figure out how to use it.
Anyone have a actual "civilian" experience and user feedback with the accordion?

yage-king of the mountain

Quote from: yage on October 22, 2007, 07:40:37 PM


However, I do not think I would use it on a website or forum that was not directed to technical-knowledgeable users because I am sure a lot of the browsing public would not know how to use it or figure out how to use it.

Agreed.. It never occurred to me to double click the titles.. and while very cool, I think most people would not guess what it does.

The thing is that when you open the site the first tab will drop... so people will have that effect and will know that those will move... just look at http://www.dzinerstudio.com/ (http://www.dzinerstudio.com/) and eye effect.

I think is very useful... just need to know how to put php there... ;)

What if they open when hovering instead of clicking?

Quote from: bluedevil on October 22, 2007, 10:34:16 PM
What if they open when hovering instead of clicking?

You would be forcing users to point their mouse Very carefully as menues would start to fly arround

I think a click would be fine if it showed as a link

This is very cool, thanks! :D

Quote from: dannbass on October 22, 2007, 10:25:48 PM
The thing is that when you open the site the first tab will drop... so people will have that effect and will know that those will move... just look at http://www.dzinerstudio.com/ (http://www.dzinerstudio.com/) and eye effect.

It works well on dzinerstudio site.  8)

If you want PHP there is A small difference, And Yes it is very possible.
Here is an example
Put this in a PHP Block add

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: #222;
margin: 0;
padding: 2px 5px;
background: #eee;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size: 11px;
font-weight: normal;
font-family: \'Andale Mono\', sans-serif;
}

.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\', \'#222\');
}
}, $(\'accordion\'));

}
</script>
</head>
<body>';
//Now the actual Blocks begain
echo '
<div id="accordion">
<h3 class="toggler atStart">Example 1</h3>
<div class="element atStart">';
echo'
               test
</div>
</div>
</body>
</html>';
Please note: This won't work on a Script Box, It MUST be a PHP Block as it is modified to be in PHP.
The code on first post is ONLY for a Script box.

Quote from: Zetan on October 23, 2007, 07:31:42 AM

Quote from: dannbass on October 22, 2007, 10:25:48 PM
The thing is that when you open the site the first tab will drop... so people will have that effect and will know that those will move... just look at http://www.dzinerstudio.com/ (http://www.dzinerstudio.com/) and eye effect.

It works well on dzinerstudio site.  8)

Someone requested this and pointed to that site, So thats how I got inspired to make this ;).

Yes and it is pretty cool!! Thanks a lot for the php version!! and for posting it here!!

Updated to support Validation.

i cant get this to work.

i am using the theme OverView from DzinerStudios, i have made the necessary edits to index.template and the style.css.

yet when i create the block it doesn't work. look here http://test.ihf.lp.pl/forums/

i am running a script box from the original post

any ideas?

You forgot to upload mootools-accordion.js to your forum root.

Looking good Mr. Dragoon  ;)

i still cant get it to work.

i have followed all the instructions on post number 1. this is the code i have in the scriptbox:


<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>


any ideas?

is there anything being displayed?at least the layer? try html box
You Have to follow the instructions to the dot...especially when it comes to importing the JavaScript into your template and uploading the file itself.

Quote from: Dragooon on October 25, 2007, 02:52:23 PM
You forgot to upload mootools-accordion.js to your forum root.

Have you done this part that Dragooon suggested?

Quote from: Zetan on October 25, 2007, 11:27:27 PM

Quote from: Dragooon on October 25, 2007, 02:52:23 PM
You forgot to upload mootools-accordion.js to your forum root.

Have you done this part that Dragooon suggested?

yep.

its here: http://test.ihf.lp.pl/forums/mootools-accordion.js

I'm using the PHP block version and it is working perfectly, how do I change the background of each menu item (and menu title) to be "windowbg"

Thanks
Hairy

Original post for code being used:

Quote from: Dragooon on October 23, 2007, 10:52:08 AM
If you want PHP there is A small difference, And Yes it is very possible.
Here is an example
Put this in a PHP Block add

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: #222;
margin: 0;
padding: 2px 5px;
background: #eee;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size: 11px;
font-weight: normal;
font-family: \'Andale Mono\', sans-serif;
}

.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\', \'#222\');
}
}, $(\'accordion\'));

}
</script>
</head>
<body>';
//Now the actual Blocks begain
echo '
<div id="accordion">
<h3 class="toggler atStart">Example 1</h3>
<div class="element atStart">';
echo'
               test
</div>
</div>
</body>
</html>';
Please note: This won't work on a Script Box, It MUST be a PHP Block as it is modified to be in PHP.
The code on first post is ONLY for a Script box.

Quote from: iGate on October 25, 2007, 11:17:32 PM
i still cant get it to work.

i have followed all the instructions on post number 1. this is the code i have in the scriptbox:

Code Select Expand


<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>


any ideas?

Its not working because, you closed the <div id="accordion"> before you started it again.
It should be
<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>

The <div id="accordion"> should be only 1, and it should close at very end.

Quote from: Hairy on October 26, 2007, 04:46:12 AM
I'm using the PHP block version and it is working perfectly, how do I change the background of each menu item (and menu title) to be "windowbg"

Thanks
Hairy

Original post for code being used:

Quote from: Dragooon on October 23, 2007, 10:52:08 AM
If you want PHP there is A small difference, And Yes it is very possible.
Here is an example
Put this in a PHP Block add

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: #222;
margin: 0;
padding: 2px 5px;
background: #eee;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size: 11px;
font-weight: normal;
font-family: \'Andale Mono\', sans-serif;
}

.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\', \'#222\');
}
}, $(\'accordion\'));

}
</script>
</head>
<body>';
//Now the actual Blocks begain
echo '
<div id="accordion">
<h3 class="toggler atStart">Example 1</h3>
<div class="element atStart">';
echo'
               test
</div>
</div>
</body>
</html>';
Please note: This won't work on a Script Box, It MUST be a PHP Block as it is modified to be in PHP.
The code on first post is ONLY for a Script box.

Please use the new method, If you use this method it will break XHTML Validation.
Now for the new PHP method, Do the edits said in the 1st post.
Then in a PHP Block add : echo '
<div id="accordion">
<h3 class="toggler atStart">Example 1</h3>
<div class="element atStart">';
echo'
               test
</div>
</div>';
Now for the color thingy :
For text or for The Area around text?
For the area around the text see
.toggler {
color: #222;
margin: 0;
padding: 2px 5px;
background: #eee;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size: 11px;
font-weight: normal;
font-family: 'Andale Mono', sans-serif;
}
In Style.css and see the background attribute
For the text Open Index.template and see
<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\', \'#222\');
}
}, $(\'accordion\'));

}
</script>
See the 2 Hexadecimal attributes, #ff33000 and #222.
The first one is for when it is active and the second one is when it is deactivated.

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: :

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>';

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.
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.

Thanks  :up:

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

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!

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 <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 <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 :).

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:

////////////////////////////////////////////////////
// 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:

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.

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  :2funny:

i would like to do the above to.

Hi, I newbie in this forum but I've already use SMF for 2 years, and TP for almost 1 year. Firstly I use standart setting for TP but I relize the powerfull of Tiny portal and my member forum very like my forum.

http://mxrider.or.id/portal/  (Motorcycle forum in indonesia)

I'm interested in multi bloc use accordion style which dragooon explain here, and all those script already running now and very nice indeed, but I need more help according to call some Tiny portal bloc, for eg. User box, stats, recent topic, etc. but when I call those things, It's not happened at all. Only show text "TPortal_userbox();" without contain any information inside that.

Any suggestion for fixed that?? here's my code I use bellow:

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: #222;
margin: 0;
padding: 2px 5px;
background: #eee;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size: 11px;
font-weight: normal;
font-family: \'Andale Mono\', sans-serif;
}

.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\', \'#222\');
}
}, $(\'accordion\'));

}
</script>
</head>
<body>';
//Now the actual Blocks begain
echo '
<div id="accordion">
<h3 class="toggler atStart">Example 1</h3>
<div class="element atStart">';
echo'
               test
</div>';
echo '
<h3 class="toggler atStart">Example 1</h3>
<div class="element atStart">';
echo'
               TPortal_userbox();
</div>
</div>
</body>
</html>';


please your advise here, and I do appologise if my english tereble.
thks
Best regard,
Heru herlambang.

Quote from: iGate on 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.

Ooops, that problem does not show on my forum but I eventually found what was causing it, was all the way to the right (and off my screen) ::)

I had left in an extra </div> here: <img height="15" width="15" alt="" src="/vacancies/images/aa1.bmp" /><a href="'.$scripturl.'?page=18"> Other</a><br /> </div>

I must of missed it when I combined my previous menu with this one

I have updated the previous posts so just re-copy

Cheers mate

Sorry, I've found my fault. here the code sould be changed to call TPortal block


echo '
<h3 class="toggler atStart">Example 1</h3>
<div class="element atStart">';
echo'
               TPortal_userbox();
</div>


I change it to be:


echo '
<h3 class="toggler atStart">Example 1</h3>
<div class="element atStart">';
      TPortal_userbox();
echo'
</div>';


I forgot that TPortal block should not use echo to call this, because it's already in phpbox. :D thks anyway for share this great block.

best regard
heru herlambang

@Hairy I am not sure how to separate the styles. I'll try to do this.
@heru Great!

thx hairy.

im not sure about this:

in order to get a second accordion menu, u would need to change the div id, so that u have the flexibility of styling each one individually.

CAN WE GET THIS CODE ADDED TO THE "BLOCK CODE SNIPPETS INDEX (http://www.tinyportal.net/index.php?topic=4983.0)"

I don't believe so it will work that smoothly.

Quote from: iGate on October 27, 2007, 11:33:05 AM

CAN WE GET THIS CODE ADDED TO THE BLOCK CODE SNIPPETS INDEX

Actually, we've kind of stopped doing this because of the plans we have for TP 1.0. :) We plan on making Block code snippets a package system so to speak. If it works out like we hope it will be much more organized.

Quote from: Hairy on 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  :2funny:

any ideas?

Yeah, you need to go through the javascript and rename all the functions. Then in your HTML call the id with the new naming scheme. Sounds easy right? :)

 :buck2: I think I can live without it, Thanks for the explanation though  ;)

Quote from: Hairy on October 29, 2007, 02:37:24 PM
:buck2: I think I can live without it, Thanks for the explanation though  ;)

Lol Told ya ;).

Quote from: IchBinâ,,¢ on October 29, 2007, 02:26:16 PM
Yeah, you need to go through the javascript and rename all the functions. Then in your HTML call the id with the new naming scheme. Sounds easy right? :)

anyone want to do some community service?

i did all the changes described in the first post but it didn't work ! it appears not to be reading style.css and it's not hidden ! any ideas ?

Quote from: Dragooon on October 23, 2007, 10:52:08 AM
If you want PHP there is A small difference, And Yes it is very possible.
Here is an example
Put this in a PHP Block add

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: #222;
margin: 0;
padding: 2px 5px;
background: #eee;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size: 11px;
font-weight: normal;
font-family: \'Andale Mono\', sans-serif;
}

.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\', \'#222\');
}
}, $(\'accordion\'));

}
</script>
</head>
<body>';
//Now the actual Blocks begain
echo '
<div id="accordion">
<h3 class="toggler atStart">Example 1</h3>
<div class="element atStart">';
echo'
               test
</div>
</div>
</body>
</html>';
Please note: This won't work on a Script Box, It MUST be a PHP Block as it is modified to be in PHP.
The code on first post is ONLY for a Script box.

i used this and worked but it shows all divs open ! shouldn't they all be close and open on click ?

Quote from: Dragooon on October 25, 2007, 07:51:47 AM
Updated to support Validation.

what do you mean by validation ? are you refering to php version i quoted above ?

thnx a lot !

You don't have to do that, use the edits shown in first post.
Also have you uploaded the file?

i did use the edits in the 1st post (and uploaded the file) but didn't work ! php comes better to me but it shows all divs open !
(what about validation , what is it ?)
thnx !

xHTML Validation.
Hmm...Are you sure the file is at the root?

yes i am ! i even tried the whole url address ...

Can I Have a link to your forum.

sure , http://ntrl2.no-ip.org but i have to tell you i deactivated the block ! i couldn't have members looking at it while i was experimenting ...

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:

////////////////////////////////////////////////////
// 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>';
}

In the JS you edit at index.template
onActive: function(toggler, element){
toggler.setStyle(\'color\', \'#ff3300\');
},

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

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

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

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!

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

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

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

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)