javascript - Jquery, on click on header, open panel body -

i have panel:

<div class="panel">         <div class="panel-heading" style="cursor:pointer"> blablabla             <div class="pull-right"><a href="#" data-perform="panel-collapse"><i class="ti-plus"></i></a> <a href="#" data-perform="panel-dismiss"></a></div>         </div>         <div class="panel-wrapper collapse" aria-expanded="true">             <div class="panel-body">                 unicorn             </div>         </div>     </div> 

---

i've wrote jquery:

<script>     $('.panel').on('click', function() {         $(this).children().toggleclass('panel-wrapper collapse, panel-wrapper collapse in');     }); </script>  

but close panel, no matter i'm clicking it. want panel opens, if click on panel-heading. ( whole panel heading, panel opens if click on small <i> icon )

and if click panel again, should closed again.

<div class="panel-wrapper collapse **in**"> closed panel. without in in collapse in, panel closed.

i hope can me there. , i'm sorry bad english.

thanks :)

you should use next()

$('.panel-heading').on('click', function() {          $(this).next('.panel-wrapper').toggleclass(' in');      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <div class="panel">          <div class="panel-heading" style="cursor:pointer"> blablabla              <div class="pull-right"><a href="#" data-perform="panel-collapse"><i class="ti-plus"></i></a> <a href="#" data-perform="panel-dismiss"></a></div>          </div>          <div class="panel-wrapper collapse" aria-expanded="true">              <div class="panel-body">                  unicorn              </div>          </div>      </div>

you can use slidetoggle("slow") slide in panel or make use of -webkit transitions in css.

$('.panel-heading').on('click', function() {          $(this).next('.panel-wrapper').slidetoggle("slow");      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <div class="panel">          <div class="panel-heading" style="cursor:pointer"> blablabla              <div class="pull-right"><a href="#" data-perform="panel-collapse"><i class="ti-plus"></i></a> <a href="#" data-perform="panel-dismiss"></a></div>          </div>          <div class="panel-wrapper collapse" aria-expanded="true">              <div class="panel-body">                  unicorn              </div>          </div>      </div>