How to Hide && Show GridView rows onclick of header element with Javascript?

Question

I have a GridView that has a structure like this:

• group-header

  • dept-header

    • (some person entity)
    • (some person entity)

Answer 1

$(function () {
        $('.group-header').click(function () {
            $(this).children('.dept-header').each(function () {
               $(this).slideToggle();
            })
        });
    });


 $(function () {
        $('.group-header').click(function () {
            $(this).children('.dept-header').each(function () {
                var el = this;
                if (el.style.display != 'none') {
                    el.style.display = 'none';
                }
                else {
                    el.style.display = '';
                }
            })
        });
    });
**UPDATE :** 
 $(function () {
    $('.group-header').click(function () {
        $(this).nextUntil('.group-header').each(function () {
            var el = this;
            if (el.style.display != 'none') {
                el.style.display = 'none';
            }
            else {
                el.style.display = '';
            }
        })
    });
});

EDIT

$(function () {
                      $('.group-header').click(function () {
                          var parentgrpHeader = $(this);

                          $(this).nextUntil('.group-header').each(function () {
                             !parentgrpHeader.hasClass("toggle") ?  $(this).hide() : $(this).show();
                          });

                          parentgrpHeader.toggleClass('toggle');
                      });


                       $('.dept-header').click(function () {
                          $(this).toggleClass('collapsed').nextUntil('.dept-header, .group-header').toggle();
                      });


              });