Bootstrap Snippet anirudha bhowmik minus plus using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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 ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type="text/css">
<div class="container">
<button type="button" onclick="myFunction()" class="btn btn-default" style="width:100%;">show
     <span id="cd" class="pull-right" > <i class="fa fa-plus" aria-hidden="true"></i></span>
<span id="ab" style="display: none;" class="pull-right"><i class="fa fa-minus" aria-hidden="true"></i></span>
    </button>
    <div id="panel">Hello world!</div>
  </div>
    
    
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}
#panel {
    padding: 50px;
    display: none;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
     var count = 0;
function myFunction() {
    count=count+1;
    var a=document.getElementById("cd");
    var b=document.getElementById("ab");
     $("#panel").slideToggle("slow");
    if(count ==1)
    {
        a.style.display='none';
        b.style.display='block';
        
    } else {
        a.style.display='block';
        b.style.display='none';
        count = 0;
    }
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"anirudha bhowmik minus plus"
Bootstrap 3.0.0 Snippet by anirudhabhowmik

Related: See More

Questions / Comments:

"anirudha bhowmik minus plus" Bootstrap 3.0.0 Snippet by anirudhabhowmik

Related: See More

Questions / Comments:

"anirudha bhowmik minus plus"
Bootstrap 3.0.0 Snippet by anirudhabhowmik