<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="no-gutter row"> <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2 col-xl-2 navPanel "> <div class="panel"> <div class="panel-heading"> <img src="https://secure.gravatar.com/avatar/de9b11d0f9c0569ba917393ed5e5b3ab?s=140&r=g&d=mm" class="img-responsive" alt="Cinque Terre"> </div> <div class=""> <ul class="nav nav-pills nav-stacked"> <li class="checkers"> <div class="row"> <div class="col-md-8 pills_col"> Local Procedures </div> <div class="checkbox col-md-4 pills_col"> <label style="font-size: 1em"> <input type="checkbox" value=""> <span class="cr"><i class="cr-icon fa fa-check"></i></span> </label> </div> </div> </li> <li class="checkers"> <div class="row"> <div class="col-md-8 pills_col"> Local Policies </div> <div class="checkbox col-md-4 pills_col"> <label style="font-size: 1em"> <input type="checkbox" value=""> <span class="cr"><i class="cr-icon fa fa-check"></i></span> </label> </div> </div> </li> <li class="checkers"> <div class="row"> <div class="col-md-8 pills_col"> Global Policies </div> <div class="checkbox col-md-4 pills_col"> <label style="font-size: 1em"> <input type="checkbox" value=""> <span class="cr"><i class="cr-icon fa fa-check"></i></span> </label> </div> </div> </li> </ul> <div class="row"> <div class="col-md-12 pills_col"> Filter By: </div> </div> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 col-xl-12"> <div class="row mysiteHeaders text-center"> <div class="col5 col-sm-6 boxes"> <div class="boxTitle"> <p class="text-center">My Blog</p> </div> <div class="boxIconText"> <i class="fa fa-rss fa-2x" aria-hidden="true"></i> <strong>4</strong> </div> </div> <div class="col5 col-sm-6 boxes"> <div class="boxTitle"> <p class="text-center">My Email</p> </div> <div class="boxIconText"> <i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i> <strong>4</strong> </div> </div> <div class="col5 col-sm-6 boxes"> <div class="boxTitle"> <p class="text-center">My Invite</p> </div> <div class="boxIconText"> <i class="fa fa-calendar fa-2x" aria-hidden="true"></i> <strong>4</strong> </div> </div> <div class="col5 col-sm-6 boxes"> <div class="boxTitle"> <p class="text-center">My Notifications</p> </div> <div class="boxIconText"> <i class="fa fa-bell-o fa-2x" aria-hidden="true"></i> <strong>4</strong> </div> </div> <div class="col5 col-sm-6 boxes"> <div class="boxTitle"> <p class="text-center">My Tasks</p> </div> <div class="boxIconText"> <i class="fa fa-check-square-o fa-2x" aria-hidden="true"></i> <strong>4</strong> </div> </div> </div> </div> </div>

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) { /* For landscape layouts only */ .deviceOffset { margin-right: 100px; margin-left: 100px; } .deviceOffset .twoColumnsGrid { width: 50%; } } @media(min-width: 992px) { .col5 { width: 20%; float: left; position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } } a.eachbox { font-weight: 300; display: inline-block; text-decoration: none !important; color: white !important; padding: 20px 30px; margin: 5px 0 0 6px; width: 100%; } a.eachbox .eachicon { line-height: 32px; font-size: 30px; display: inline-block; vertical-align: middle; border-right: 1px solid rgba(255, 255, 255, 0.25); padding-right: 15px; width : 50px; } a.eachbox .description { display: inline-block; vertical-align: middle; padding-left: 10px; width: 180px; height: 32px; } a.eachbox.twitter { -webkit-transition: background-color 0.25s ease-in-out; transition: background-color 0.25s ease-in-out; } /* only remove padding of middle columns */ .downarrow i { margin-top: 40px; } .collapseContainer a:hover, .collapseContainer a { color: #BA0100; text-decoration: none; } .boxTitle p { font: 14px sans-serif; padding-top: 10px; text-align: center; letter-spacing: 0.5px; } p.sectionHeading { position: relative; z-index: 1; text-align: center; margin-top: 15px; } .sectionInfo h5 { font-weight: 700; padding-top: 15px; } .list-style { list-style: inherit !important; padding-left: 20px; } p.sectionHeading:before { border-top: 2px solid #dfdfdf; content: ""; //margin: 0 auto; /* this centers the line to the full width specified */ position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */ top: 50%; left: 0; right: 0; bottom: 0; width: 95%; z-index: -1; margin-left: 20px; } p.sectionHeading span { /* to hide the lines from behind the text, you have to set the background color the same as the container */ background: #fff; padding: 0 15px; font-size: 20px } .status { font-family: 'Source Sans Pro', sans-serif; } .navPanel .panel-body { background-color: #EDEDED; } .panel-body .nav a { font-size: 12px; color: #000; } .panel-body .nav-pills>li.active>a { background-color: #BA0100; ; } .navPanel { padding-left: 10px; padding-right: 0px; background-color: #EDEDED; } .navPanel .panel-heading img { width: 100%; } .navPanel .panel-heading { padding: 0px; } .boxIconText strong { font-size: 28px; font-weight: 300; } .navPanel li { border-bottom: 1px solid #fff; } .boxes { border-radius: 0px; background-color: #BA0100; color: #fff; font-weight: 300; border-right: 1px solid #fff; border-top: 1px solid #fff; padding-top:10px; } .checkbox label:after { content: ''; display: table; clear: both; } .checkbox .cr{ position: relative; display: inline-block; border: 1px solid #a9a9a9; border-radius: .25em; width: 1.3em; height: 1.3em; float: left; margin-right: .5em; } .checkbox .cr .cr-icon { position: absolute; font-size: .8em; line-height: 0; top: 50%; left: 20%; } .checkbox label input[type="checkbox"] { display: none; } .checkbox label input[type="checkbox"] + .cr > .cr-icon{ transform: scale(3) rotateZ(-20deg); opacity: 0; transition: all .3s ease-in; } .checkbox label input[type="checkbox"]:checked + .cr > .cr-icon { transform: scale(1) rotateZ(0deg); opacity: 1; } .checkbox label input[type="checkbox"]:disabled + .cr { opacity: .5; } .pills_col { margin-top:10px; margin-bottom:0px; padding-left:15px; } .checkers { background: #ff2020; padding-left:15px; } .active { background: #820000; color:#fff; font-size:14px; font-weight:bold; } .arr-bg { position: absolute; left: 279px; top: 0px; width: 0; height: 0; border-left: 25px solid #820000; border-bottom: 18px solid #fff; border-top: 18px solid #fff; }

$( document ).ready(function() { $("input[type=checkbox]").change(function() { if($(this).is(":checked")) { $(this).parents("li").addClass('active'); $(this).parents("li").append("<span class='arr-bg'></span>") } else { $(this).parents("li").removeClass('active'); $('.arr-bg').remove(); } }).change(); });