Hello Friends,

Today I have created a simple example of child element show and hide function in jQuery. Many times I found that we are facing an issue of showing child element of each list by clicking list parent element.
Here in jQuery code, I used parents(), siblings() and find() selectors to show the child element by clicking a button of each "li tag". Sometimes we found complexity to get the result. Here I created a simple function by taking 'this' method.

Just go through the code and Enjoy the functionality.

HTML Code

<div class="container">
 <ul class="listing">
  <li>
   <button class="btn-click">Click</button>
   <div style="display: none" class="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
   </div>
  </li>

  <li>
   <button class="btn-click">Click</button>
   <div style="display: none" class="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
   </div>
  </li>

  <li>
   <button class="btn-click">Click</button>
   <div style="display: none" class="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
   </div>
  </li>

  <li>
   <button class="btn-click">Click</button>
   <div style="display: none" class="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
   </div>
  </li>

  <li>
   <button class="btn-click">Click</button>
   <div style="display: none" class="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
   </div>
  </li>
 </ul>
</div>

JavaScript Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>

//Code for Listing
<script type="text/javascript">
$(document).ready(function(){
 $('.listing li').each(function(){
  //alert($(this).children().attr('class'));
  $(this).find('.btn-click').click(function () {
   $(this).parent().siblings().find('.content').hide(500);
   $(this).siblings('.content').slideToggle();
  })
 })
});
</script>

CSS Code

<style>
.container { width:90%; margin: 0 auto; }
  li {
   background: #e0e0e0;
   display: block;
   padding:20px 20px;
   margin-bottom:5px;
   list-style: none
}
 </style>