Как я могу загрузить div на страницу загрузки на основе значения идентификатора

Question

Я использую JQuery SlideUp и slideDown методы для show/hide панелей. Как загрузить или отобразить первую запись Контактная информация по умолчанию?

Сейчас она загружается пустой, потому что я установил панель display:none: <div class="panel rpspanel panel-default" id="@item.ID" style="display: none">, иначе она загружает все, если у меня несколько результатов.

Нужна помощь в загрузке первого при загрузке страницы. А остальное по клику, которое работает отлично.

Левая панель:

Передать идентификатор элемента (или любое уникальное значение) атрибуту li in data-id

<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>  

Правая панель:

id attribute для всех панелей. тот же id, который я прошел на левой панели.

  @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 скрипт:

Вкл на левой панели на li click получить значение атрибута data-id.
Скрыть все панели.
Показать панель с указанным атрибутом id.

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

Answer 1

Создайте отдельный function для функции slideDown() на основе id и передайте id первого .panel-handler при загрузке документа:

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