Hola, estoy usando materialize css framework componente plegable. Quiero que se marque el botón de opción cuando haga clic en el encabezado completo y el cuerpo del contenido debería expandirse.

HTML:

 <li class="active"> <div class="collapsible-header"> <label class="acc-header-radio"> <input class="with-gap" name="selectCard" type="radio" checked /> <span>header </span> </label> </div> <div class="collapsible-body"> content body </div> </li> <li> <div class="collapsible-header"> <label class="acc-header-radio"> <input class="with-gap" name="selectCard" type="radio" /> <span>header </span> </label> </div> <div class="collapsible-body"> content body </div> </li> </ul>

jquery:

 $('.collapsible').collapsible(); $('.acc-header-radio input').on('change', function() { if($(this).prop('checked', true)){ var activeList = $(this).closest('li') activeList.addClass('active'); activeList.children('collapsible-body').slideDown(); } });