Hi am using materialize css framework component collapsible.I want radio button checked when click on entire header and content body should expand.

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