JSFiddle - React, Tailwind, and code Playground

by kfranqueiro

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css">
    
    <body class=" claro ">
        <div style="width: 300px; height: 300px">
            <div dojoType="ClassyChildAccordionContainer" style="height: 300px;">
                <div dojoType="dijit.layout.ContentPane" class="firstPane" title="Heeh, this is a content pane">
                    Hi!
                </div>
                <div dojoType="dijit.layout.ContentPane" title="This is as well" selected="true">
                    Hi how are you?
                </div>
                <div dojoType="dijit.layout.ContentPane" title="This too">
                    Hi how are you? .....Great, thx
                </div>
            </div>
        </div>
    </body>

CSS

.firstPane .dijitAccordionTitle {
    font-weight: bold;
}

JavaScript

dojo.require("dijit.layout.AccordionContainer");
dojo.ready(function() {
    dojo.declare('ClassyChildAccordionContainer', dijit.layout.AccordionContainer, {
        _setupChild: function(child) {
            this.inherited(arguments);
            var c = child.get('class');
            if (c) {
                child._wrapperWidget.set('class', c);
            }
        }
    });
    dojo.parser.parse();
});