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-subrole="title" class="disabled"><a href="#">Sport</a></li>
    
    <li data-subrole="show" data-role="autocomplete" data-for="sport-input">
        <input type="text" placeholder=""></li>
    
    <div data-subrole="container values" data-for="sport-input">
        <li><a href="#">Basketball</a></li>
        <li><a href="#">Soccer</a></li>
        <li data-subrole="initial">
            <a href="#">Football</a></li>
        <li><a href="#">Volleyball</a></li>
        <li><a href="#">Track &amp; Field</a></li>
        <li data-subrole="initial">
            <a href="#">Tennis</a></li>
        <li data-subrole="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>
        <li><a href="#">Baseball</a></li>
    </div>
    
    <li data-subrole="expand"><a>See All Sports</a></li>
</ul>

CSS

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

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

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

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

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

[data-role="collapsing"] > [data-subrole="show"] {
    padding: 0 2px 0 0;
}

[data-role="collapsing"]  > [data-subrole="show"] input[type] {
    width: 100%;
    margin: 0;
    padding: 8px 0;
    border-radius: 0;
    text-indent: 11px;
}

JavaScript

var rickrolls = $('[data-role]').attr('data-init', 'init');


var collapsing = $('[data-role="collapsing"]')
                    .attr('data-state', 'collapsed')
                    .find('[data-subrole="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');
    }
});