JSFiddle - React, Tailwind, and code Playground

by jessekinsman

HTML

<div class="accordion">
    <h3> some kind of header </h3>
    <div class="wrapper">
        <ul class="list-test">
            <li class="selected"><a href="#" class="one">One </a><div>test</div></li>
            <li id="not-selected"><a href="#" class="one">Two</a></li>
        </ul>
    </div>
    <h3> some kind of header 2 </h3>
    <div class="wrapper">
        <ul class="list-test">
            <li class="selected"><a href="#" class="one">One </a><div>test</div></li>
            <li id="not-selected"><a href="#" class="one">Two</a></li>
        </ul>
    </div>
</div>

CSS

ul {
    padding: 0;
    margin: 0;
}
ul li {
    list-style-type: none;
    margin: .2em 0;
    text-indent: 0;
    padding: 1em;
}
ul li a {
    color: #000;
    text-decoration: none;
}

.test * {
    font-size: 1em;
}
h3 {
    font-size: 2em;
}
.a-panel {
    height: 0;
    display: block;
    position: relative;
    width: auto;
    overflow: hidden;
    -webkit-transition: height 2s;
    transition: height 2s;
    background: #efefef;
}
.selected + .a-panel {

}
.accordion > h3 {
    cursor: pointer;
    padding: 1em;
    background: grey;
    font-size: 1.5em;
}

JavaScript

var two = Y.one(".list-test").get('innerHTML');
Y.all('.accordion > div').addClass('a-panel');
Y.all('.accordion > h3').addClass('a-header');
Y.all('.a-header').on('click',function(e) {
    if (Y.all('.selected').size() > 0) {
        Y.all('.a-header').removeClass('selected');
        Y.all('.a-panel').setStyles({ height: 0 })
    }
   
    var panel = e.target.next();
    panel.setStyles({ visibility: 'hidden', height: 'auto', position: 'absolute' });
    var ht = panel.get('offsetHeight');
    alert("height: " + ht);
    panel.setStyles({ visibility: 'visible', height: ht, display: 'block', position: 'relative' });
    e.target.addClass('selected');
});