MooTools Accordion Advanced

[Ed]

Hi Guys.

I have attempted a slightly more advanced version of the popular MooTools - Accordion, but, have run into a few problems.

What I want to do is, when an element is active, I want it's toggler to be a different colour to the rest of the togglers.

So when a box (or element as they call it) is open, I want it to have the blue background image, while the other boxes are closed, I want them to have the white background image.

However, with my JavaScript, when the page first appears - the box's toggler that's open is the only one with the blue image, but when I click on another toggler, that box keeps the blue image with the new one.

So if I click on all of them, they are all blue, regardless of whether they are "open".

Have a look here.

This is my javascript:

Code: Select all

window.addEvent('domready', function(){
            var accordion = new Accordion('h3.atStart', 'div.atStart', {
    opacity: false,
    onActive: function(toggler, element){
        toggler.addClass('toggler2');
    },
 
    onBackground: function(toggler, element){
        toggler.addClass('toggler');
    }
}, $('accordion'));
 
 
var newTog = new Element('h3', {'class': 'toggler'}).setHTML('Common descent');
 
var newEl = new Element('div', {'class': 'element'}).setHTML('<p>A group of organisms is said to have common descent if they have a common ancestor. In biology, the theory of universal common descent proposes that all organisms on Earth are descended from a common ancestor or ancestral gene pool.</p><p>A theory of universal common descent based on evolutionary principles was proposed by Charles Darwin in his book The Origin of Species (1859), and later in The Descent of Man (1871). This theory is now generally accepted by biologists, and the last universal common ancestor (LUCA or LUA), that is, the most recent common ancestor of all currently living organisms, is believed to have appeared about 3.9 billion years ago. The theory of a common ancestor between all organisms is one of the principles of evolution, although for single cell organisms and viruses, single phylogeny is disputed</p>');
 
accordion.addSection(newTog, newEl, 0);
        });

In my CSS, I have two classes, toggler 2, and toggler - each with a different background.

Code: Select all

.toggler {
color: #222;
height: 29px;
margin: 0;
padding: 5.5px 11.55px;
background: url(http://simplifiedimpact.com/about/actoff.png) no-repeat;
font-size: 11.85px;
font-weight: normal;
font-family: 'Andale Mono', sans-serif;
text-align: right;
}

.toggler2 {
color: #222;
height: 29px;
margin: 0;
padding: 5.5px 11.55px;
background: url(http://simplifiedimpact.com/about/acton.png) no-repeat;
font-size: 11.85px;
font-weight: normal;
font-family: 'Andale Mono', sans-serif;
text-align: right;
}

I cannot understand why this isn't working. Does anyone have an idea what could be wrong, nor mind what I'm talking about?

Thanks,
Ed

[Ed]

Had been searching on Google for a solution and found this.

He's doing exactly what I want to do, but I don't want to copy & paste his code.

Would anyone have any idea?

Thanks,
Ed

[welshstew]

I built an accordian function a while back. The idea was similar to yours, but it swapped out an entire div layer (background image/colour).

Code: Select all

// stop image flicker for IE6.0 SP1+
try{document.execCommand("BackgroundImageCache", false, true);}catch(err){}
    
// constructor
function Accordian(PanelName, PanelCount){

    // retrieve session cookie value
    function get_cookie(Name){
        var offset;
        var end;
        var search = Name + "=";
        var returnvalue = "";
        if (document.cookie.length > 0) {
            offset = document.cookie.indexOf(search);
            // if cookie exists
            if (offset != -1) { 
                offset += search.length;
                // set index of beginning of value
                end = document.cookie.indexOf(";", offset);
                // set index of end of cookie value
                if (end == -1) end = document.cookie.length;
                returnvalue=unescape(document.cookie.substring(offset, end));
            }
        }
        return returnvalue;
    }

    // set private fields
    this.animationFrames = 5; //set animation speed
    this.panelName = PanelName;
    this.panelCount = PanelCount;
    this.panelHeights = new Array();
    this.endName = "acend";
    this.startName = "start";
    
    // event handler for panel clicks
    this.Panel_OnClick = function(PanelId){
        if(PanelActive[PanelId] != true)return false;
        var clickedPanel = document.getElementById(PanelId);
        var index = clickedPanel.id.replace(this.panelName,"");
        if(clickedPanel.style.height == "0px"){
            // store session cookie
            document.cookie = clickedPanel.id + "=expanded";
            
            // expand panel
            this.ExpandPanel(clickedPanel, index);
        }
        else{
            // store session cookie
            document.cookie = clickedPanel.id + "=collapsed";

            // collapse panel
            this.CollapsePanel(clickedPanel, index);
        }
        return true;
    }
    
    // close the panel
    this.CollapsePanel = function(Panel, Index){
        var pixels = this.panelHeights[Panel.id] / this.animationFrames;
        ResizePanel(Panel.id,"up",pixels,this.panelHeights[Panel.id],1,this.animationFrames, Index, this.endName, this.panelCount);
    }
    
    // open the panel
    this.ExpandPanel = function(Panel, Index){
        var pixels = this.panelHeights[Panel.id] / this.animationFrames;
        ResizePanel(Panel.id,"down",pixels,this.panelHeights[Panel.id],1,this.animationFrames, Index, this.endName, this.panelCount);
    }

    var userFrames = this.animationFrames;
    this.animationFrames = 1;
    // store panel max heights and restore session state
    for(var i = 1; i <= this.panelCount; i++){
        var currentPanel = document.getElementById(this.panelName + i);
        this.panelHeights[this.panelName + i] = currentPanel.style.height.replace("px","");
        if(get_cookie(this.panelName + i) == "collapsed" || get_cookie(this.panelName + i) == "") this.CollapsePanel(currentPanel, i);
    }
    this.animationFrames = userFrames;
}

function ResizePanel(PanelId, Direction, IncrementPixels, MaxPixels, CurrentFrame, MaxFrames, Index, EndName, PanelCount){
// run until last frame
    var Panel = document.getElementById(PanelId);
    if(CurrentFrame <= MaxFrames){
        if(Direction == "up"){
            // first frame
            if(CurrentFrame == 1 && Index == PanelCount){
                document.getElementById(EndName).className = EndName + "off";
            }
            // collapse
            Panel.style.height = MaxPixels - (CurrentFrame * IncrementPixels) + "px";
            
            // last frame
            if(CurrentFrame == MaxFrames){
                Panel.style.display = "none";
                document.getElementById("acheading" + Index).className = "acheading" + Index + "off";
            }
        }
        else{
            if(CurrentFrame == 1){
                document.getElementById("acheading" + Index).className = "acheading" + Index + "on";
                Panel.style.display = "block";
            }
            // expand
            Panel.style.height = CurrentFrame * IncrementPixels + "px";            
            
            // last frame
            if(CurrentFrame == MaxFrames && Index == PanelCount){
                document.getElementById(EndName).className = EndName + "on";
            }

        }
        // move to next frame
        setTimeout("ResizePanel('" + PanelId + "','" + Direction + "'," + IncrementPixels + "," + MaxPixels + "," + (CurrentFrame + 1) + "," + MaxFrames + "," + Index + ",'" + EndName + "',"+ PanelCount + ");",30);
    }
}

HTML: Select all

<div id="acheading1" class="acheading1on" onClick="accordian.Panel_OnClick('accontent1');"></div>
                    <div class="accessible"><b>hidden heading</b></div>
                    <div id="accontent1" class="accontent" style="height:60px">
                        text that will appear when the accordian is activated
                    </div>

...
<div id="acend" class="acendon"></div>

/*placed at end of accordian*/
<script language="javascript" type="text/javascript">
                    <!--
                        var accordian = new Accordian('accontent',5);
                    //-->
                </script>

So within the last bit of script above you change the number to represent the number of accordians within the page (3, 5, 10 etc). The div "acend" is so that you can place a closing image in the accordian. i.e. if you want curved borders then you would place a curved end image in this div.

The CSS would then be as follows:

Code: Select all

<style type="text/css">
    .accessible{
        display:none;
    }
    
    #acheading1{
        height:41px;
        cursor:pointer;
    }
    
    .acheading1off{
        background-image:url('/images/panels/infoheading1_inact.gif');
    }
    
    .acheading1on{
        background-image:url('/images/panels/infoheading1_act.gif');
    }

#acend{
        height:7px;
        overflow:hidden;
        margin-bottom:5px;
    }

    .acendon{
        background-image:url('/images/panels/panel_end_act.gif');
    }    

    .acendoff{
        background-image:url('/images/panels/panel_end_inact.gif');
    }

and so forth until you have enough for your accordian.

I'm pretty sure you can use this to your ends.

Hope that helps.

Stew

[Ed]

Jees...You're not an Advisor for Nothing!
Thanks So Much!

I HAVE TO TRY IT FIRST THOUGH!

Thanks,
Ed

[welshstew]

Sorry, forgot to mention, that I set it to load all the images first, before you could run the accordian.

You will therefore need to add: onLoad="preloadImage(1)" to the body tag

I built it for one of my first clients, but he has still to ask me to install it, which is strange as he has totally mucked up his site at the mo, ah well (means more work for 2008 ! ).

Jees...You're not an Advisor for Nothing!

Yeah, I have my uses /*goes back to serving drinks to Karinne, Lchad and Sannbe*/

[welshstew]

oh, I must warn ou that this currently isn't good for accessibility.

At the mo, we need to know the height for the box to collapse and expand it by X pixels. This means that if you override the text height in your browser settings, the text starts to be cut off.

I have found some other accordians out there that you may wish to also try:

http://www.dezinerfolio.com/2007/07/...pt-accordions/
http://www.stickmanlabs.com/accordion/
http://www.solutoire.com/experiments...s/acc_ex3.html

[Ed]

Thanks Again!

The first link is by far the best I've seen!
It doesn't even need a framework.

Tks, Ed/.