JSFiddle - React, Tailwind, and code Playground

by Thomas Upton

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/tundra/tundra.css">
<body class="tundra">
    <div id="container"></div>
</body>

JavaScript

require([
    'dijit/layout/ContentPane',
    'dijit/layout/AccordionContainer',
    'dojo/dom',
    'dojo/_base/declare',
    'dijit/focus'
], function(ContentPane, AccordionContainer, dom, declare, focus) {
    
    function isReallyVisible(elem) {
        return (!!elem && (elem.offsetWidth||0) !== 0 && (elem.offsetHeight||0) !== 0);
    }
    
    var MultiAccordionButton = declare([AccordionContainer._Button], {
        _onTitleClick: function() {
            console.log('click', this, arguments);

            var parent = this.getParent(),            
                open = isReallyVisible(this.contentWidget._wrapperWidget.containerNode);
            
            if (!open) {
                var selected = parent.selectedChildWidget;
                parent.selectChild(this.contentWidget);
                if (selected) {
                    parent._showChild(selected);
                }
            } else {
                parent._hideChild(this.contentWidget);
            }
        }
    });
    
    var ac = new AccordionContainer({
        buttonWidget: MultiAccordionButton
    });
    
    ac.addChild(new ContentPane({
        title: 'a title',
        content: 'hello'
    }));
                
    ac.addChild(new ContentPane({
        title: 'different title',
        content: 'different content'
    }));
    
    ac.addChild(new ContentPane({
        title: 'yet another title',
        content: 'some other content'
    }));
    
    ac.placeAt(dom.byId('container'));
    ac.startup();
    
    
});