How to change content of right side of side-navbar on clicking navbar links?

Question

I have a side-navbar and its content on right side. How can I show respective contents on right side while clicking the nav link? For eg: Name should be shown only when clicking name and password field should be shown only when clicking password.

I have multiple links and more contents like this using bootstrap 5 and simple JavaScript. Thank you :)

.settings{
display:flex;
}
.tab-details{
margin-left:30px;
margin-top:20px

}

<div class="settings">
        <div class="side-nav">
          <ul class="sidebar-nav">
            <li>
              <a class="nav-link" href="#">Name</a>
            </li>
            <li>
              <a class="nav-link" href="#">Password</a>
            </li>
            <li>
              <a class="nav-link" href="#">Security</a>
            </li>
          </ul>
        </div>
        <div class="tab-details">
        <div id="name-tab">
              <form>
                      <label class="form-label" for="first-name"
                        >Name</label>
                      <input type="text" id="" class="form-control" />
           
                <button type="submit" class="btn btn-primary btn-block mb-4">
                  Save
                </button>
              </form>
          </div>
          <div id="password-tab">
              <form>
                      <label class="form-label" for="first-name"
                        >password</label>
                      <input type="text" id="" class="form-control" />
           
              </form>
          </div>
         </div>
       </div>

Answer 1

You can use JQurey to hide the tabs by default (if that what's you need - but that is more consequent), and then show them on click, like so:

jQuery(document).ready(function($) {
  $(function() {
    $('.tab-details > div').hide(); //to hide the tabs by default

    $('#name').click(function() {
      $('.tab-details > div').hide();
      $('#name-tab').show(); //to show only the specific one...
    });
    $('#password').click(function() {
      $('.tab-details > div').hide();
      $('#password-tab').show();
    });
    $('#security').click(function() {
      $('.tab-details > div').hide();
      $('#security-tab').show();
    });
  });

});

.settings {
  display: flex;
}

.tab-details {
  margin-left: 30px;
  margin-top: 20px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="settings">
  <div class="side-nav">
    <ul class="sidebar-nav">
      <li>
        <a class="nav-link" id="name" href="#">Name</a>
      </li>
      <li>
        <a class="nav-link" id="password" href="#">Password</a>
      </li>
      <li>
        <a class="nav-link" id="security" href="#">Security</a>
      </li>
    </ul>
  </div>
  <div class="tab-details">
    <div id="name-tab">
      <form>
        <label class="form-label" for="first-name">Name</label>
        <input type="text" id="" class="form-control" />

        <button type="submit" class="btn btn-primary btn-block mb-4">
                  Save
                </button>
      </form>
    </div>
    <div id="password-tab">
      <form>
        <label class="form-label" for="first-name">password</label>
        <input type="text" id="" class="form-control" />

      </form>
    </div>
  </div>
</div>

Notice, that you have to assign id's to the links for the script to work.