如何从html的侧栏菜单中选择项目详细信息？

Question

Here i am getting project list from json. Where JSON result will be listed in side bar has a menu.

here is JSON result Which i am getting

"projects": [
  {
    "instances": null,
    "name": "decodingideas",
    "projectid": "decodingideas-147616",
    "projectnumber": 334691107943,
    "orgid": "",
    "orgname": "",
    "parentid": "",
    "parenttype": ""
},
{
    "instances": null,
    "name": "pupil-workers",
    "projectid": "pupil-workers",
    "projectnumber": 455648594684,
    "orgid": "",
    "orgname": "",
    "parentid": "",
    "parenttype": ""
}

In side bar menu "name" & "project id" will listed. When clicking on any of project name it should shows the details projects like project name, project id, project number, instance..etc which i am getting from JSON result

here is the code i used for listing projects from json :

<div class="container-fluid">
  <div class="row">
    <nav class="col-md-2 d-none d-md-block bg-light sidebar">
      <div id="projectlist" class="sidebar-sticky">
        <ul class="nav flex-column nav-pills">

          {{range .Projects}}
          <li class="nav-item" >
            <a name="{{.ProjectID}}" class="nav-link" href="#">

              <img class="img-fluid" style="width:8%" 
  src="static/image/generic_gcp.png">
              {{.Name}}

              <div>
                <small>
                ProjectId: {{.ProjectID}}
              </small>
              </div>
            </a>
            </li>
            {{end}}

        </ul>

 <!-- Might need this seperator
        <h6 class="sidebar-heading d-flex justify-content-between align-items- 
 center px-3 mt-4 mb-1 text-muted">
          <span>Savings Reports</span>
        </h6>
      -->
      </div>
    </nav>
       <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
      {{range .Projects}}

      <div id={{.ProjectID}} class="d-none justify-content-between flex-wrap 
 flex-md-nowrap align-items-center pb-2 mb-3 border-bottom ">
        <h1 class="h2">Project:{{.Name}}</h1>

<!-- This pushes right
<div class="btn-toolbar mb-2 mb-md-0">    </div>
 -->

    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button 
  groups">
      <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">Compute API 
 Enabled</button>
      </div>
      <div class="btn-group mr-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-secondary">Service Account 
 Key</button>
      </div>
      <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-secondary">Other Errors</button>
      </div>
    </div>

Here is the javascript code which i have tried:

  <script>
$(function() {
  $( 'ul.nav a' ).on( 'click', function() {
        var pjname = $( this ).attr('name');
        $( this ).parent().parent().find( 'a.active' ).removeClass( 'active' 
);
        $( this ).addClass( 'active' );
        $('#'+pjname).toggleClass( 'd-none');
      });
});
</script>

   <script>

var btnContainer = document.getElementById("projectlist")
var btns = btnContainer.getElementsByClassName("btn");


for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
</script>

Right now i am getting selected project details but when clicking on next project from side bar it shows previous clicked project details in additionally. How to show selected project details alone?

can anyone help me out of this, i am nearly struggling with past one day!!!

Answer 1

Add common class to project discription div. for example - "right-content"

Change

From

<div id={{.ProjectID}} class="d-none justify-content-between flex-wrap 
 flex-md-nowrap align-items-center pb-2 mb-3 border-bottom ">

To

<div id={{.ProjectID}} class="d-none justify-content-between flex-wrap 
 flex-md-nowrap align-items-center pb-2 mb-3 border-bottom right-content">

No change js below way

From

<script>
$(function() {
  $( 'ul.nav a' ).on( 'click', function() {
        var pjname = $( this ).attr('name');
        $( this ).parent().parent().find( 'a.active' ).removeClass( 'active' 
);
        $( this ).addClass( 'active' );
        $('#'+pjname).toggleClass( 'd-none');
      });
});
</script>

To

<script>
$(function() {
    $('ul.nav a').on('click', function() {
        var pjname = $(this).attr('name');
        $(this).parent().parent().find('a.active').removeClass('active');
        $(this).addClass('active');
        $('.right-content').removeClass('d-none');
        $(".right-content:not(#" + pjname + ")").addClass('d-none');
    });
});
</script>