Listen to an event when a class has been added to an html element using plain javascript -

i using scroll spy bootstrap. active class gets added when scrolling element comes view. normal behavior of scroll spy.

i trying notified when active class gets added li element.

<li     key       = {`${idx}`}     classname = "panel " >     <a         href        = {`#${groupid}`}         data-toggle = "collapse"         data-parent = {`#${accordionid}`}         data-target = {`#menu${idx}`}         classname   = "temp-link"     >       menu     </a>     <ul classname="nav nav-list panel-collapse collapse " id={`${ulidx}`}>           <li> .... </li>           <li> .... </li>           <li> .... </li>     </ul> </li> 

i trying attach event handler parent li called when gets active class. @ time show ul element via adding class collapse in. using reactjs , not want use jquery based solutions. simpler javascript based solutions, ideas or suggestions welcomed.

check out mutationobserver api.

it allows observe specific dom element changes , executes callback if such change occurs. remaining functionality should trivial implement.

mutationobserver provides developers way react changes in dom. designed replacement mutation events defined in dom3 events specification.