Selecting Only next child

Question

Doing a treeview in MVC .   Clicking the blue icon expands next node and icon turn green. When I click "Client Alpha", Beta, Gamma or Delta the epansion occurs as expected. But when I click the icon for Issue 1, Issue 1's nodes expand but "Client Beta" is also hidden.   In the uploaded source code, I am getting the next div and using toggle() to hide/show. What can I do to prevent the next "main node" from also hiding? What am I missing?

Darveson Wright · Answer

Not sure what I am doing wrong. This is what works for me. Problem solved.   $(document).ready(function () { $('.icon').on('click', function () { var $pRow = $(this).parents('div'); var $nextRow = $pRow.next('div'); $nextRow.children(":first").parent('div').toggle(); $(this).toggleClass('icon-s icon-e'); }); })   Thanks

Jignesh Kumar · Answer

You mean, You have done like this.    $(document).ready(function () {             $( '.icon' ).on( 'click' , function () {                 var $pRow = $( this ).parents( 'div' );                 var $nextRow = $pRow.next( 'div' );                   $nextRow .children( ":first" ) .toggle();                  $( this ). toggleClass ( 'icon-s icon-e' );              });         })

Darveson Wright · Answer

Thank you. When I use parent the node does not expand. Exploring your answer lead me to a solution. From the children collection of $nextRow toggle only the first child.

Jignesh Kumar · Answer

Hi,   use parent instead of parents. $(document).ready(function () {           $( '.icon' ).on( 'click' , function () {               var $pRow = $( this ). parent ( 'div' );               var $nextRow = $pRow.next( 'div' );                $nextRow.toggle();               $( this ).toggleClass( 'icon-s icon-e' );           });       })