Accordion Style Menu Block

[Dragooon]

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

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

Code Select Expand

</head>
Add Before

Code Select Expand

<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

Code Select Expand

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

Code Select Expand


<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

Code Select Expand

<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

[whoesa]

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

Code Select Expand

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

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

[Dragooon]

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

[MinasC]

good work man , thnx !!!

[Fl4meS]

Nice Job.

[Crip]

Kool!

[Rus]

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.

[dannbass]

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

[yage]

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

[Zetan]

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.