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>