javascript - How to Properly Check if First Child is Hidden and Then Set Function Bool -

i'm trying come answer recent question of mine , believe best answer involves function peeking @ first child element , setting bool outside of function function use.

to recap: have gridview has structure this:

• group-header

  • dept-header

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

  • dept-header

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

• group-header

  • dept-header

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

  • dept-header

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

basically, want when group-header clicked hides following rows until next group-header if aren't hidden, else shows them.

i have code , html set @ https://jsfiddle.net/dlp47mtd/1/, code in question not expanding/collapsing is:

// hide/show group's data on click $(function() {     $('.group-header').click(function() {         // assume first dept-header not visible         var nextvisible = 0;         // check if first dept-header visible         $(this).firstchild(function() {             var el = this;             // if visible, change our assumption             if (el.style.display === '') {                 nextvisible = 1;             }         });          // if visible, hide sub-elements else show sub-elements         $(this).nextuntil('.group-header').each(function() {             var el = this;                 if (nextvisible === 1) {                 el.style.display = 'none';             } else {                 el.style.display = '';             }         });     }); }); 

this worked me, provided want show , hide rows under group without remembering departments may have been toggled already.

https://jsfiddle.net/dlp47mtd/5/

// hide/show dept's data on click $(function () {     $('.dept-header').click(function () {         $(this).nextuntil('.dept-header, .group-header').toggle();     }); });  $(function () {     $('.group-header').click(function () {         var elm = $(this);         if (elm.next().is(":visible")) {             elm.nextuntil('.group-header').hide();         } else {             elm.nextuntil('.group-header').show();         }      }); });