<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>

.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; }

$(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; } }); });