Filter Selection

Accordian UI to promote query attribute selection.

by Erik Bartlow

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="panel-group" id="accordion">
    <div class="panel panel-default" id="panel1">
        <div class="panel-heading">
            <h4 class="panel-title" />
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Primary Project Attributes
        </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                <ul>
                    <li>
                        <div class="attribute-label">
                            <label class="pull-left">IT Funding Approved</label>
                            <div class="slideThree pull-left">
                                <input type="checkbox" value="None" id="slideThree" name="check" checked />
                                <label for="slideThree"></label>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="panel panel-default" id="panel2">
        <div class="panel-heading">
            <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
         ...

CSS

ul {
        list-style: none;
    }
    
    li span {
        margin-left: 20px;
        font-size: 18px;
    }
    
    .panel-body {
        background: #3498db;
        font-family: 'Open Sans', sans-serif;
        font-weight: 300;
    }
    .attribute-label{
      display: block;
      margin: 20px auto;
      color: #FFF;
    }
    .attribute-label .slideThree{
      margin-left: 20px;
    }
    /* $activeColor: #c0392b; //red */
    /* $background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/13460/dark_wall.png'); */
    /* .slideOne */
    
    .slideOne {
        width: 50px;
        height: 10px;
        background: #333;
        margin: 20px auto;
        position: relative;
        border-radius: 50px;
        -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
        box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
    }
    
    .slideOne label {
        display: block;
        width: 16px;
        height: 16px;
        position: absolute;
        top: -3px;
        left: -3px;
        cursor: pointer;
        background: #fcfff4;
        background: -webkit-gradient(linear, left top, left bottom, from(#fcfff4), color-stop(40%, #dfe5d7), to(#b3bead));
        background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        border-radius: 50px;
        -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;
    }
    
    .slideOne input[type=checkbox] {
        visibility: hidden;
    }
    
    .slideOne input[type=checkbox]:checked + label {
        left: 37px;
    }
    /* end .slideOne */
    /* .slideTwo */
    
    .slideTwo {
        width: 80px;
        height: 30px;
        background: #333;
        margin: 20px auto;
        position: relative;
        border-radius: 50px;
       ...

JavaScript

$('.collapse').collapse({
    toggle: false
})