Bootstrap Snippet hide and show a child element using HTML CSS Bootstrap jQuery

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
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class=container>
    <h1>Hide and Show a Child div Element</h1>
    <div class=row>
     <div class='col-sm-12 droid_font' style='float: right;'>
     <div class='faq droid_font' style=''>
        <div class='question' style='cursor:pointer'>question1<span class='glyphicon glyphicon-menu-down' style='float: right;'></span></div>
        <div class='answer' style='cursor: pointer;display:none;'>answer<span class='glyphicon glyphicon-menu-up' style='float: right;'></span></div>
    </div>
    <div class='faq droid_font' style=''>
        <div class='question' style='cursor:pointer'>question2<span class='glyphicon glyphicon-menu-down' style='float: right;'></span></div>
        <div class='answer' style='cursor: pointer;display:none;'>answer2<span class='glyphicon glyphicon-menu-up' style='float: right;'></span></div>
    </div>
        
     </div>
   </div><!-- /row -->
   </div>
  
 </div> 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.faq{
    background:#edeff7;
    border:1px solid gray;
    margin-bottom: 15px;
}
.question{
    cursor:pointer;
    text-align: left;
    padding: 5px;
}
.answer{
    cursor:pointer;
    text-align: left;
    padding: 5px;
    background-color:#c1ffc4;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function() { 
    var p=0;
    $( ".faq" ).click(function() {
        if(p==0){
            $(this).children(".answer").show("blind"); 
            p=1;
        }else{
        $(this).children(".answer").hide("blind"); 
            p=0;
        }
    });
     
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"hide and show a child element"
Bootstrap 3.3.0 Snippet by mustafas18

Related: See More

Questions / Comments:

"hide and show a child element" Bootstrap 3.3.0 Snippet by mustafas18

Related: See More

Questions / Comments:

"hide and show a child element"
Bootstrap 3.3.0 Snippet by mustafas18