How can i hide and show panel on click?

Question

I have the two panel to display Contact detail and company Names left and right. sometimes I might have more than 4 contacts detail In Right Panel listed vertically that looks bad so I am thinking, When I click on the Contact name from a left panel I want to display the selected Contact information In the right Panel and hide others. Also, I want the first Contact information to be the default.

In Left Panel: to display company information I have the following code.

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

In Right Panel: to display company information I have the following code.

 @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

I am assuming that you have a unique id in the record.

I am using JQuery SlideUp and slideDown methods to show/hide panels

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:

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

@{
    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 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");
        $(".panel").slideUp();
        $("#" +id).slideDown();
    });
});

Demo:

$(".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>