Rick Roles: Collapse

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="stack highlight" data-role="collapse">
  
    <li data-subrole="title" class="title">Sport</li>
    <hr data-subrole="ignore">
    <li data-subrole="ignore"><input type="text" placeholder="Type Sport.."></li>
    
    <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" class="active">
        <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>
    <hr data-subrole="ignore">
    <li data-subrole="expand" class="vertical-align-middle">
        <a>
            <span data-alt="See Popular Sports">See All Sports</span>
            <span data-alt="▲" style="font-size: .5em">▼</span>
        </a>
    </li>
</ul>

CSS

[data-role="collapse"] > *,
[data-role="collapse"][data-state="expanded"] [data-subrole="reverse"] { display: none }

[data-role="collapse"] [data-subrole="title"],
[data-role="collapse"] [data-subrole="expand"],
[data-role="collapse"] [data-subrole="initial"],
[data-role="collapse"] [data-subrole="ignore"],
[data-role="collapse"] [data-subrole="reverse"],
[data-role="collapse"][data-state="expanded"] > * { display: block }


/***********************************************/

.stack {
    display: block;
    border: 1px solid rgba(0, 0, 0, .15);
    border-top: none;
    padding: 0 .5em;
    margin: 0;
}

.stack > * {
    width: 100%;
    padding: .25em .5em;
    margin: 0 -.5em;
    
    border-top: 1px solid rgba(0, 0, 0, .15);
    border-radius: 0;
}

.stack > .title {
    font-weight: 700;
    text-align: center;
}

.stack > * > a {
    display: block;
    margin: -.25em -.5em;
    padding: .25em .5em;
    
    text-decoration: none;
    cursor: pointer;
}

.stack hr {
    width: auto;
    height: 0;
    padding: 0;
    margin: 0 -.5em;
    border-top: 1px solid rgba(0, 0, 0, .15);
    border-bottom: 1px solid transparent;
}

.stack > * input {
    width: 100%;
    margin: .25em 0;
    padding: .25em 0;
    text-indent: .5em;
}

.stack.highlight {
    background: rgba(0, 0, 0, .05);
}

.stack.highlight > * a:hover {
    background: #fff;
}

.stack.highlight > .active a {
    background: #fff;
    color: #262626;
    font-weight: 700;
}

.vertical-align-middle,
.vertical-align-middle * {
    vertical-align: middle;
    
}

JavaScript

var collapse = $('[data-role="collapse"]')
                   .attr('data-state', 'collapsed')
                   .find('[data-subrole="expand"]');

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

    var $this = $(this).parent('[data-role="collapse"]'),
        alt = $this.find('[data-alt]');
    
    alt.each(function() {
        var $this   = $(this),
            text    = $this.text(),
            newText = $this.attr('data-alt');
        
        $this.attr('data-alt', text).text(newText);
    });
    
    if ($this.attr('data-state') === "expanded") {
        $this.attr('data-state', 'collapsed');
    } else {
        $this.attr('data-state', 'expanded');
    }
    
});