How can i load div on Page Load based on ID value

Question

I am using JQuery SlideUp and slideDown methods to show/hide panels. How can load or display the first record Contact information as a default?

Right now it loads blank because i set the panel display:none: <div class="panel rpspanel panel-default" id="@item.ID" style="display: none"> otherwise it loads all if i have multiple results.

Need help to load the first one when the page loads. And the rest on click event which working perfect.

Left Panel:

Pass the item id (or any unique value) to the li in data-id attribute

<ul id="treeview">
     @foreach (var item in rpInfo)
        {
          <li data-expanded="true" class="panel-handler" data-id="@item.id">
              <i class="fa fa-check-circle"></i>@item.PartyName
                <ul>
                     <li data-expanded="true">  <i class="fas fa-check-circle"></i> @item.ContactName </li>
                 </ul>
           </li>
         }
  </ul>  

Right Panel:

id attribute to all panels. the same id which i have passed in the left panel.

  @foreach (var item in rpInfo)
            {                    
                var DeleteModal = "#myModal" + item.ID;                   
                var mid = "myModal" + item.ID;
                <div class="panel rpspanel panel-default" id="@item.ID" style="display: none">
                              Contact Information</h4>
                          </div>
                          <div class="panel-body">
                              <div class="card card-understated">
                                  <div class="card-heading">
                                      <h4>@(Localizer["Contact Preview "])</h4>
                                  </div>
                                  <div class="card-body">
                                      <p>
                                          @item.ContactName<br>
                                          @item.ContactTitle<br>
                                          @item.PartyName<br>
                                          @item.AddressLine1<br />
                                          @item.City, @item.State @item.Country
                                      </p>
                                  </div>
                              </div>                          
                          </div>
                      </div>
                  }

Jquery script:

On on left panel on li click get the data-id attribute value.
Hide all panels .
Show the panel with the specified id attribute.

    $(document).ready(function() {
        $(".panel-handler").click(function() {
            let id = $(this).data("id");
            $(".rpspanel").slideUp();
            $("#" +id).slideDown();
        });
    });

Answer 1

Make a separate function for the slideDown() functionality based on id, and pass id of the first .panel-handler on load of document:

$(document).ready(function() {
    $(".panel-handler").click(function() {
        showInfo($(this).data("id"));        
    });

    function showInfo(id){
        $(".rpspanel").slideUp();
        $("#" +id).slideDown();
    }

    // For first time
    showInfo($(".panel-handler").eq(0).data("id"))
});