I need to show content when i change the tab.

Initially the content is show, after i change the tab the content is not shown.

Please let me know even if i change the tab i need to see the content.

I am using asp.net core and i have used partial view in each tab content.

Sample code

New Appointment

    <div class="tab-pane fade show active" role="tabpanel" aria-labelledby="newappointmenttab">
        <div class="row">
            <div class="col-md-6 col-lg-4">
                <select id="department" class="select"  data-mdb-clear-button="true" data-mdb-filter="true" data-mdb-auto-select="false">
                    @{
                        if (TempData["Department"] != null)
                        {
                            List<PatientPortal.Models.Department.Department> depts = (List<PatientPortal.Models.Department.Department>)TempData["Department"];
                            @if (depts != null)
                            {
                                <option value=""></option>
                                @foreach (PatientPortal.Models.Department.Department dept in depts)
                                {
                                    <option value="@dept.Id">@dept.DepartmentName</option>
                                }
                            }    
                        }
                    }
                </select>
                <label class="form-label select-label">Department</label>  
            </div>
        </div>
        <div id="newappointmentview">

        </div>
    </div>
    <div
    class="tab-pane fade"
    id="bookedappointmentview"
    role="tabpanel"
    aria-labelledby="bookedappointmenttab"
    >

        @*<partial name="/Views/Appointment/Index.cshtml"></partial>*@
    </div>
</div>

@section ApptScripts{ $(document).ready(function() { $("#newappointmentview").load("/Appointment/Doctor"); }); }