Sidebar as Accordion

Wordpress Sidebar as Josef Sakalos Accordion widget? Yes. It was one of the best experiences I had during coding the theme. It took about ten minutes to make it work. HTML of my sidebar looks like the one below. Every widget has widget class assigned and two children. The first one is translated into panel’s header, next once becomes panel’s content.

<div id="sidebar">
    <div id="categories" class="widget widget_categories">
        <div class="wtitle">Categories</div>
        <div class="text-content">
        <ul>
            <?php wp_list_categories(‘title_li=’); ?>
        </ul>
        </div>
    </div>
    <div id="archives" class="widget widget_archives">
        <div class="wtitle">Archives</div>
        <div class="text-content">
        <ul>
            <?php wp_get_archives(‘type=monthly’); ?>
        </ul>
        </div>
    </div>
    [...]
</div>

First I have put accordion control into my layout as an east panel:

<script>
. . .
    theEast = layout.add(‘east’, new Ext.ux.Accordion(‘panelEast’, {
        monitorWindowResize:true,
        title:‘Sidebar’,
        autoScroll:true,
        collapsible: true,
        fitToFrame: true,
        animate:false,
        boxWrap: true,
        fitContainer: true,
        keepState: true,
        expanding:true,
        fitHeight:true
    }));
. . .
</script>

The only thing I needed to translate it into Saki’s Accordion was to iterate through all widgets. Let’s look at the function:

<script>
. . .
    setupSidebar: function() {
        Ext.select(‘.widget’).each(
            function (e) {
                theEast.add(new Ext.ux.InfoPanel(Ext.getDom(e).id, {
                    autoScroll:true,
                    animate:false
                }));
            }
        );
    }
. . .
</script>

Thank you Saki for your great Ext extension. If anything else should be done, please let me know.