filter div

by Mark

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
    <form class="form">
        <div class="form-group">
            <label for="selectList">Filter Divs</label>
            <select id="selectList" class="form-control">
                <option value="1" selected="selected">Show All</option>
                <option value="2">One</option>
                <option value="3">Two</option>
                <option value="4">Three</option>
                <option value="5">Four</option>

            </select>
        </div>
    </form>
</div>

<div class="filterDiv container">
    <div class="block">
        <h1> Div One</h1>
    </div>
    <div class="block">
        <h1> Div Two</h1>
    </div>
    <div class="block">
        <h1> Div Three</h1>
    </div>
    <div class="block">
        <h1>Div Four</h1>
    </div>
</div>

CSS

.filterDiv div {
    border: solid 1px;
    margin-top: 10px;
}

.filterDiv h1 {
    text-align: center;
}

JavaScript

$('#selectList').change(function() {
    var selected = parseInt($('#selectList').val());
    var all = (selected === 1) ? $('.container').children().fadeIn() : false;
    var showItem = (selected > 1) ? $('.container').children(':nth-child(' + (selected - 1) + ')').fadeIn().siblings().hide() : false;
});