JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<link rel="stylesheet" href="http://cdn.thejameskyle.com/bootstrap.css">
<link rel="stylesheet" href="http://cdn.thejameskyle.com/bootstrap-responsive.css">
<ul class="nav nav-tabs nav-stacked" data-role="collapsing">
    <li data-role="title" class="disabled"><a href="#">Sport</a></li>
    <li><a href="#">Basketball</a></li>
    <li><a href="#">Soccer</a></li>
    <li data-role="initial">
        <a href="#">Football</a></li>
    <li><a href="#">Volleyball</a></li>
    <li><a href="#">Track &amp; Field</a></li>
    <li data-role="initial">
        <a href="#">Tennis</a></li>
    <li data-role="initial">
        <a href="#">Running</a></li>
    <li><a href="#">Swimming</a></li>
    <li><a href="#">Golf</a></li>
    <li><a href="#">Lacrosse</a></li>
    <li><a href="#">Baseball</a></li>
</ul>

<hr>

<ul class="nav nav-tabs nav-stacked" data-role="collapsing">
    <li data-role="title" class="disabled"><a href="#">Sports</a></li>
    <li><a href="#">Something 1</a></li>
    <li><a href="#">Something 2</a></li>
    <li data-role="initial"><a href="#">Something 3</a></li>
    <li><a href="#">Something 4</a></li>
    <li><a href="#">Something 5</a></li>
    <li data-role="initial"><a href="#">Something 6</a></li>
    <li data-role="initial"><a href="#">Something 7</a></li>
    <li><a href="#">Something 8</a></li>
</ul>

CSS

body {
    padding-top: 20px;
    padding-bottom: 20px;
}

[data-role="collapsing"] > * {
    display: none;
}

[data-role="collapsing"] > [data-role="title"] {
    font-weight: bold;
    background: #f2f2f2;
    
}

[data-role="collapsing"] > [data-role="expand"] {
    cursor: pointer;
    background: #f2f2f2;
}

[data-role="collapsing"] > [data-role="title"],
[data-role="collapsing"] > [data-role="expand"],
[data-role="collapsing"] > [data-role="initial"],
[data-role="collapsing"] > [data-role="input"],
[data-state="expanded"] > * {
    display: block;
}

JavaScript

var collapsing = $('[data-role="collapsing"]')
                    .attr('data-state', 'collapsed')
                    .append('<li data-role="expand"><a>See All Sports</a></li>')
                    .find('[data-role="expand"]');

collapsing.click(function(e) {
    e.preventDefault();

    var $this = $(this),
        text = $this.find('a');

    $this = $this.parent('[data-role="collapsing"]')

    if ($this.attr('data-state') === "expanded") {
        $this.attr('data-state', 'collapsed');
        text.text('See All Sports');
    } else {
        $this.attr('data-state', 'expanded');
        text.text('See Less');
    }
});