How to use JQuery click method on html lists

Question

In my program i have un-ordereded lists which has ordered lists.Requirement is like on clicking the un-ordered list element the child ordered list should open up:

Below is the code that i have written:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="E:\development\JSPProject\jquery-2.1.4.js">
      </script>

      <script type="text/javascript">

         $(document).ready(function() {

             $(".GChild").hide();
             $(".child").click(function()
                     {
                 $(".GChild").show();}
                 ); 
             })


      </script>
   </head>
   <body>
   <h3>Welcome </h3>
   <div>
   <ul class="parent">
   <li class ="child">Numbers
   <ol><li class="GChild">one</li><li class="GChild">two</li></ol>
   <li class ="child">Alphabets<ol><li class="GChild">A</li><li class="GChild">B</li></ol></li></ul>
   </div></body>
</html>

so here when i click on Numbers the other list also shows up.I know that i didnt specify anything specific to that list.I tried adding this line

$(this).filter(".GChild").show();

instead of
$(".GChild").show();

But it didn't work.I am new to JQuery so please don't mind if it is silly Question.Is there any way i can achieve "Clicking on (Numbers) it should display One, and Two--------In the same way Alpha-->A,B

BravoZulu · Accepted Answer · 2015-07-31 18:35:04Z

1

Here's a JSFiddle with your desired functionality.

This is the code:

$(document).ready(function() {
    $(".child").click(function(){
        $(this).children().find('.GChild').toggle();
    })
})

HTML

<h3>Welcome </h3>
   <div>
   <ul class="parent">
       <li class ="child">Numbers
           <ol>
               <li class="GChild">one</li>
               <li class="GChild">two</li>
           </ol>
        </li>
       <li class ="child">Alphabets
           <ol>
               <li class="GChild">A</li>
               <li class="GChild">B</li>
           </ol>
        </li>
    </ul>
   </div>

answered Jul 31, 2015 at 18:35

BravoZulu

1,14013 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

scottheckel · Accepted Answer · 2015-07-31 18:34:50Z

1

You only want to find .GChild that are children of the current child you are clicking on. filter didn't work because it reduces a set of elements by the selector you are passing in. In your case, it was saying filter down this current child to a collection that is also a .GChild.

You are looking for jQuery find, which finds all descendants of the current nodes that match your selector. Change your code to look like the following:

$(document).ready(function() {
  $(".GChild").hide();
  $(".child").click(function() {
    $(this).find(".GChild").show();
  }); 
});

answered Jul 31, 2015 at 18:34

scottheckel

9,2741 gold badge37 silver badges47 bronze badges

Comments

Ash · Accepted Answer · 2015-07-31 18:37:22Z

0

Try this:

$(this).find('ol').show();

Demo here.

answered Jul 31, 2015 at 18:37

Ash

2,1082 gold badges19 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to use JQuery click method on html lists

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related