How to show details on selecting checkbox in LWC

....HTML....

<template>

    <lightning-card title="Apply for leave" icon-name="custom:custom14">

    <div class="slds-m-around_medium">

        <lightning-input type="checkbox" label="Multiple day" onchange={handleChange1}>

        </lightning-input>

        <template if:true={areDetailsVisible1}>

    <div class="slds-text-heading_small slds-m-bottom_medium">

        <lightning-input type="date"  label="Start date" name="startDate">

        </lightning-input>

        <lightning-input type="date" label="End date" name="emailAddress">

        </lightning-input>

    </div>

        </template>

    </div>

    <div class="slds-m-around_medium">

    <lightning-input type="checkbox" label="Single Day" onchange={handleChange2}>

    </lightning-input>

    <template if:true={areDetailsVisible2}>

        <div class="slds-text-heading_small slds-m-bottom_medium">

        <lightning-input type="date"  label="Date" name="endDate">

        </lightning-input>

    </div>

    </template>

    </div>

    <div class="slds-m-around_medium">

    <lightning-input type="checkbox" label="Half Day" onchange={handleChange3}>

    </lightning-input>

    <template if:true={areDetailsVisible3}>

        <div class="slds-text-heading_small slds-m-bottom_medium">

            <lightning-input type="date"  label="Date1" name="Date1">

            </lightning-input>

        </div>

    </template>

    </div>

</lightning-card>

</template>

....JS....

import { LightningElement } from 'lwc';

export default class TemplateIFTrueExampleLWC extends LightningElement {

    areDetailsVisible1 = false;

    handleChange1(event) {

        this.areDetailsVisible1 = event.target.checked;

       

    }

    areDetailsVisible2 = false;

    handleChange2(event) {

        this.areDetailsVisible2 = event.target.checked;

    }

    areDetailsVisible3 = false;

    handleChange3(event) {

        this.areDetailsVisible3 = event.target.checked;

    }

}

js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>52.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

....OUTPUT....