Как я могу скрыть и показать панель при нажатии?

Question

У меня есть две панели для отображения контактных данных и названий компаний слева и справа. иногда у меня может быть более 4 контактных данных In Right Panel, перечисленных по вертикали, что выглядит плохо, поэтому я думаю: когда я нажимаю на имя контакта на левой панели, я хочу отобразить выбранную контактную информацию на правой панели и скрыть других. Кроме того, я хочу, чтобы первая контактная информация была по умолчанию.

На левой панели: для отображения информации о компании у меня есть следующий код.

<ul id="treeview">
     @foreach (var item in rpInfo)
        {
          <li data-expanded="true"><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>       

На правой панели: для отображения информации о компании у меня есть следующий код.

 @foreach (var item in rpInfo)
                    {
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                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>
                    }

Answer 1

Я предполагаю, что у вас есть уникальный идентификатор в записи.

Я использую JQuery SlideUp и slideDown методы для show/hide панелей

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

Pass идентификатор элемента (или любое уникальное значение) атрибута 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, который мы передали на левой панели.

@{
    int counter = 1;
  }
    @foreach (var item in rpInfo)
                      {
                          <div class="@(counter++ == 1 ? "panel panel-default" : "panel")" id="@item.id" >
                              <div class="panel-heading">
                                  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 скрипт:

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

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

Демонстрация:

$(".panel-handler ").click(function() {
    let id = $(this).data("id");
    if ($("#" + id).css('display') === 'none') {
        $(".panel ").slideUp();
        $("#" + id).slideDown();
    }

});

.panel-handler {
    display: inline-block
}

.panel {
    display: none;
}

.panel-default {
    display: inline;
}

.left-panel {
    float: left;
    width: 154px;
    border-right: 2px solid #000;
    padding: 10px;
}

.left-panel li {
    display: inline-block;
    width: 100%;
    height: 20px;
    margin-bottom: 9px;
    border-bottom: 0.1px solid #000;
    cursor: pointer;
}

.right-panel {
    float: left;
    padding: 10px;
    width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left-panel">
    <h2>Left panel</h2>
    <ul>
        <li class="panel-handler" data-id="1">Panel-1 handler</li>
        <li class="panel-handler" data-id="2">Panel-2 handler</li>
        <li class="panel-handler" data-id="3">Panel-3 handler</li>
    </ul>
</div>


<div class="right-panel">
    <h2>Right panel</h2>
    <div class="panel panel-default" id="1">Panel-1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
    <div class="panel " id="2">Panel-2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
    <div class="panel " id="3">Panel-3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
</div>