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' ); }); })