Bootstrap Snippet left bor collapse using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="container">
    <div class="col-xs-3">
        <ul id="left_bar" class="list-unstyled">
        <li class="panel">
            <a href="#" data-toggle="collapse" data-target="#left_bar1" data-parent="#left_bar" alt="+" class="collapsed" aria-expanded="false">Aquafine UV</a>
            <ul id="left_bar1" class="list-unstyled collapse" style="margin-left: 1em; height: 0px;" aria-expanded="false">
                <li><a href="#">OSPREY</a></li>
                <li><a href="#">GREGORY</a></li>
                <li><a href="#">SALOMON</a></li>
                <li><a href="#">BOLANG</a></li>
            </ul>
        </li>
        <li class="panel">
            <a href="#" data-toggle="collapse" data-target="#left_bar2" data-parent="#left_bar" alt="+" class="collapsed" aria-expanded="false">Filtrafine 濾殼</a>
            <ul id="left_bar2" class="list-unstyled collapse" style="margin-left: 1em; height: 0px;" aria-expanded="false">
                <li><a href="#">Canavan 雪靴/襪子</a></li>
            </ul>
        </li>
        <li class="panel">
            <a href="#" data-toggle="collapse" data-target="#left_bar3" data-parent="#left_bar" alt="+" class="collapsed" aria-expanded="false">Filtrafine 濾心</a>
            <ul id="left_bar3" class="list-unstyled collapse" style="margin-left: 1em; height: 0px;" aria-expanded="false">
                <li><a href="#">折疊濾心</a></li>
                <li><a href="#">活性碳濾心</a></li>
                <li><a href="#">熔噴濾心</a></li>
                <li><a href="#">纏繞濾心</a></li>
                <li><a href="#">膠囊濾心</a></li>
                <li><a href="#">薄膜濾心</a></li>
            </ul>
        </li>
        <li class="panel">
            <a href="#" data-toggle="collapse" data-target="#left_bar4" data-parent="#left_bar" alt="+" class="collapsed" aria-expanded="false">Filtrafine 濾袋</a>
            <ul id="left_bar4" class="list-unstyled collapse" style="margin-left: 1em; height: 0px;" aria-expanded="false">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
      #left_bar > li{
        margin-bottom: 10px;
        font-size: 17px;
        position: relative;
      }
      #left_bar li a{
        color: #535353;
        width: 100%;
      }
      #left_bar li a:hover, #left_bar li a:active, #left_bar li a:focus{
        color: #9a1e23;
        text-decoration: none;
      }
      #left_bar > li > a:after{
        content: attr(alt);
        color: #000;
        position: absolute;
        right: 0;
        top: 0;
      }
      .left_mune_active {
        color: #9a1e23 !important;
        text-decoration: none;
      }
      .sidebar_detail:after{
        content: '+';
        color: #000;
        position: absolute;
        right: 0;
        top: 0;
        padding: 5px 10px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$('a[data-toggle="collapse"]').click(function(){
  $('a[data-toggle="collapse"]').each(function(){
    $(this).attr('alt','+');
    $(this).removeClass('left_mune_active');
  });
  var _selecter = $(this).attr('data-target');
  var _css = $(_selecter).attr('class');
  var _ans =  _css.indexOf('in');
  if( _ans == -1){
    $(this).attr('alt','-');
    $(this).addClass('left_mune_active');
  }else{
    $(this).attr('alt','+');
    $(this).removeClass('left_mune_active');
  }
  
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"left bor collapse"
Bootstrap 3.0.0 Snippet by Arashi

Related: See More

Questions / Comments:

"left bor collapse" Bootstrap 3.0.0 Snippet by Arashi

Related: See More

Questions / Comments:

"left bor collapse"
Bootstrap 3.0.0 Snippet by Arashi