Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Display Child Content by clicking parent Element in multiple listing

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 217
    Comment on it

    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>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: