How can I dynamically update the content of the right side of the side navbar by clicking on navbar links?

I have a side-navigation bar with content on the right side. How can I display specific content on the right side when clicking on a navigation link? For example, only show the name when clicking on the name link and only show the password field when clicking on the password link.

I am using Bootstrap 5 and simple JavaScript to achieve this functionality for multiple links and contents. 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>
javascripthtmlcssbootstrap-5

Answer №1

If you want to hide the tabs using JQurey by default and then show them when clicked, you can achieve that with the following code snippet:

jQuery(document).ready(function($) {
  $(function() {
    $('.tab-details > div').hide(); //Tabs are hidden by default

    $('#name').click(function() {
      $('.tab-details > div').hide();
      $('#name-tab').show(); //Show specific tab
    });
    $('#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>

Remember to give ids to the links for the script to function correctly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sample Blazor Visual Studio template does not include bootstrap.js and lacks references to blazor.server.js

After setting up a Blazer server-side project in Visual Studio, I noticed the following code in _Host.cshtml: <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" /> <script src="_framework/blazor.server.js"& ...

blazorbootstrap-5blazor-server-side

Issue with PHP form not saving data and correctly parsing output

I am facing an issue with my PHP page where it is supposed to grab responses from a form, insert the data into a table, and then display the response on the same page. I am using ajax to send form values without refreshing the page, but unfortunately, no i ...

phpjavascriptjquerymysqlajax

What is the best way to obtain the final visible element using jQuery?

Could you please check out the following link: http://jsfiddle.net/SHfz4/ All of the blue boxes are technically visible, so I can't use the code $('.row .inner .item:visible:last'); as it will always return box 27. Some boxes may not be v ...

javascriptjquery

Ways to conceal the 'Return to Top' button in a script that is only revealed after navigating to the bottom of the page

Can anyone help me hide the 'Back to Top' button in a script that only appears after scrolling to the bottom of the page? I need to take screenshots without it showing up. I've tried using the code below, but the 'Back to Top' but ...

javascriptjavaseleniumselenium-webdrivercss-selectors

When inserting <img>, unwanted gaps appear between div elements

When I have <img> in the child divs, there is some space between them and a blue stripe appears under the image. How do I make them stack perfectly without any gaps? I am new to HTML and CSS and trying to learn for marketing purposes. Any help or ad ...

htmlcss

Unable to execute Javascript function within a click event handler

I am encountering an issue with a div that is loaded through ajax. Here is the structure of the div: <div id="container"> <a href="#" class="easyui-linkbutton submit_data">Click here to submit</a> </div> Within the same file c ...

javascriptjquery

Attempting to replace the checkbox image resulted in no changes

<?php require 'includes/configs.inc.php'; ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title><?php $site_name ?></titl ...

javascriptjquery

Shifting an item to a specific location using three.js

I'm attempting to fire bullets or projectiles utilizing three.js: let renderer, camera, scene, light, plane, cube, spheres; initialize(); animate(); function initialize() { renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); ...

javascriptthree.js

How can I launch five separate instances of Chrome on a Selenium grid, each with a different URL?

I have a list of URLs saved in a JSON file, structured like this: { "urls": [ "http://www.google.com/", "http://www.stackoverflow.com" ] } Currently, these URLs are being opened sequentially by the Selenium WebDriver JavaScript manager on a ...

javascriptgoogle-chromeseleniumselenium-webdriverpromise

what is the best way to change background image in media query for various screen sizes?

I have a customized email template with a background image. The size of the image is 600px (width), and I have applied a class called back-img for styling purposes. I am looking to override this class specifically for all mobile screen sizes, including lan ...

htmlcssresponsive-designmedia-queries

Checking with jQuery Validate: displaying an error message if input matches a certain value

I spent 6 hours trying to figure out a solution to my issue. Currently, I am utilizing the jQuery Validation plugin. In my form, there is a password input field. When an AJAX request detects an incorrect password, another input field is set to a value of ...

javascriptjqueryhtmlajaxvalidation

JavaScript Arrays are not functioning properly within the Poo constructor

Attempting to insert data into a JavaScript Array within my constructor has resulted in this error message: TypeError: this.listeetudiant is undefined This is my constructor: function Cours(){ */the array causing trouble: */ this.listeetudiant=[]; */ ...

javascriptarraysconstructor

Avoiding useCallback from being called unnecessarily when in conjunction with useEffect (and ensuring compliance with eslint-plugin-react-hooks)

I encountered a scenario where a page needs to call the same fetch function on initial render and when a button is clicked. Here is a snippet of the code (reference: https://stackblitz.com/edit/stackoverflow-question-bink-62951987?file=index.tsx): import ...

javascriptreactjstypescriptreact-hookseslint-plugin-react-hooks

What is the best way to implement a hover effect on multiple rows within an HTML table using Angular?

I am currently working on developing a table preview feature to display events. I previously sought assistance here regarding positioning elements within the table and successfully resolved that issue. Applying the same principles, I am now attempting to c ...

htmlcssangulartypescript

Locate an item based on the `Contains` criterion by utilizing Express and Mongoose

Looking to find items in my collection that have userName containing adm. Expecting 2 results based on having records with userNames like admin0 and admin2, but the search returns nothing. The query being used is: Person .find({ userName: { $in: &a ...

javascriptnode.jsmongodbexpressmongoose

The current code lacks any form of line breaks

While attempting to edit a CSS file in Sublime Text 2, I noticed that all the code is displayed without any line breaks. This makes it difficult to read and work with. Is there a way to fix this issue and format the code into readable sections? ...

csscode-cleanup

Programmatically setting focus in Ionic

In my Ionic and Angular component, I am attempting to programmatically set focus after the page has loaded. Here is the code: item.component.html: <ion-row> <ion-col col-5> <ion-item > <ion-label&g ...

cssangularionic3

How can one efficiently navigate through extensive functions without risking surpassing the stack limit?

I am currently developing an application in Node.js that requires numerous configuration and database calls to process user data. The problem I am facing is that after reaching 11,800+ function calls, Node throws a RangeError and exits the process. The er ...

javascriptnode.jscouchdbexpress

React Native - The Animated.spring function experiences a flickering issue when the animation is reverted

I am currently working on implementing a drawer in my react native app. The issue I am facing is with the closing animation. When I click the close button, the animation seems to blink or flicker, as if it is opening and closing multiple times before final ...

javascriptandroidanimationreact-native

Explain what mongoose and Schema are at the beginning, just once

Hello, I am currently working on a Node.js application using Express and MongoDB. In order to utilize MongoDB and schema, I have to define Mongoose and schema in all of my routing JavaScript files. However, I would like to only define them once. As I am ne ...

javascriptnode.jsmongodbexpress