What is the best way to show only one div at a time when selecting from navbar buttons?

To only display the appropriate div when clicking a button on the left navbar and hide all others, you can use this code:

For example:

  • If "Profile" is clicked in the left navbar, the My Profile Form div will be displayed (and all others will remain hidden).
  • If "My Properties" is clicked in the left navbar, the My Properties div will be displayed (and all others will remain hidden).
  • And so on for the rest of the buttons.

To accomplish this, you can utilize the following JavaScript:


const ProfileForm = document.getElementById('profile_container');
const ProfileButton = document.getElementById('profile_id');
const PropertiesForm = document.getElementById('my_properties_container');
const BidsForm = document.getElementById('my_bids');
const UtilitiesForm = document.getElementById('my_utilities');
const FavouritesForm = document.getElementById('my_favourites');
const MessagesForm = document.getElementById('my_messages');
const SettingsForm = document.getElementById('my_settings');

document.body.addEventListener('click', e => {
  if (e.target == ProfileButton) {
    ProfileForm.style.display = 'block'
  } else { /*ProfileForm.style.display='none'*/ }
})

In order to style your elements appropriately, here's an example snippet of CSS:


@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
/* Your CSS styles here */

Make sure to include these scripts and stylesheet links in the head section of your HTML file:


<script src="https://kit.fontawesome.com/99c0db90d1.js" crossorigin="anonymous"></script>
<link rel="shortcut icon" type="image/jpg" href="images/33.png" />
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<link href="/css/all.css" rel="stylesheet">
javascripthtmljquerycss

Answer №1

If you want to enhance your dashboard_buttons, I recommend utilizing the dataset property for each button. For example, for the first button linked to the profile container, you could include a property like this:

<li class="dashboard_buttons" id="profile_id" data-id="profile_container"

Here, the data-id attribute represents the id of the element you wish to display.

By using this approach, your event listener will transform into:

document.body.addEventListener('click', function (e) {
    var eleToDislay = '#' + e.target.dataset.id; // get id of element to display
    $('.right_content .profile_container').hide();  // hide all previous elements...
    $(eleToDislay).show();  // show correct element....
})

You might also want to explore incorporating a full jQuery event listener instead of:

document.body.addEventListener('click', function (e) {

So it becomes:

$(document).on('click', function (e) {

The converted snippet would look like this:

$(document).on('click', function (e) {
    var eleToDislay = '#' + e.target.dataset.id;
    $('.right_content .profile_container').hide();
    $(eleToDislay).show();
})
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

* {
    margin: 0;
    padding: 0;
    /*    border: thick solid blue;*/
    font-family: 'Roboto', sans-serif;
}

html {
    height: 100%;
    /*border: thick solid yellow;*/
}

body {
    height: 100%;
    /*    width: 100%;*/
    display: flex;
    flex-direction: column;
    /*border: thick solid red;*/
    visibility: visible;
    /*background-color: #003580;*/
}

/*BUTTON BACKGROUND COLORS*/

.header_right_container_inner_center_button,
.header_right_container_inner_right_button {
    background-color: #febb02;
}

/*BUTTON HOVER COLORS*/

.header_right_container_inner_right_button:hover,
.header_right_container_inner_center_button:hover {
    background: #003580;
    color: white;
}

/* BUTTON FONT COLORS*/

.header_right_container_inner_center_button,
.header_right_container_inner_right_button {
    color: black;
}

a {
    text-decoration: none;
}

.logo {
    /*border: thick dotted blue;*/
    width: 120px;
    margin-top: -33%;
    margin-bottom: -33%;
    /*border-radius:50%;*/
}

/* HEADER START */

header {
    display: flex;
    /*    border: thick solid red;*/
    justify-content: center;
    border-bottom: thin solid black;
    padding: 9px;
    background-color: #003580;
}

/* HEADER LEFT SIDE */

.header_left_container {
    display: flex;
...
</div>
</div>

Answer №2

Storing the button index and showing corresponding div, while hiding other divs with `display:block`.

This solution is effective and functional.

const ProfileForm = document.getElementsByClassName('profile_container');

const dash = document.getElementsByClassName('dashboard_buttons');
var index;
var array = [];
for (var i = 0; i < dash.length; i++) {

  array.push(dash[i]);

  dash[i].onclick = function() {
    index = array.indexOf(this);

    ProfileForm[index].style.display = "block";

    var check = ProfileForm[index];

    for (var i = 0; i < ProfileForm.length; i++) {
      if (ProfileForm[i].style.display == "block" && ProfileForm[i] != check) {
        ProfileForm[i].style.display = "none";
      }
    }
  }

}
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
* {
  margin: 0;
  padding: 0;
  /*    border: thick solid blue;*/
  font-family: 'Roboto', sans-serif;
}

html {
  height: 100%;
  /*border: thick solid yellow;*/
}

body {
  height: 100%;
  /*    width: 100%;*/
  display: flex;
  flex-direction: column;
  /*border: thick solid red;*/
  visibility: visible;
  /*background-color: #003580;*/
}


/*BUTTON BACKGROUND COLORS*/

.header_right_container_inner_center_button,
.header_right_container_inner_right_button {
  background-color: #febb02;
}


/*BUTTON HOVER COLORS*/

.header_right_container_inner_right_button:hover,
.header_right_container_inner_center_button:hover {
  background: #003580;
  color: white;
}


/* BUTTON FONT COLORS*/

.header_right_container_inner_center_button,
.header_right_container_inner_right_button {
  color: black;
}

a {
  text-decoration: none;
}

.logo {
  /*border: thick dotted blue;*/
  width: 120px;
  margin-top: -33%;
  margin-bottom: -33%;
  /*border-radius:50%;*/
}


/* HEADER START */

header {
  display: flex;
  /*    border: thick solid red;*/
  justify-content: center;
  border-bottom: thin solid black;
  padding: 9px;
  background-color: #003580;
}


/* HEADER LEFT SIDE */

.header_left_container {
  display: flex;
  flex: 1;
  /*    border: thick solid yellow;*/
  justify-content: center;
}

.header_left_container_inner_left {
  /*    border: thick solid green;*/
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.header_left_container_inner_right {
  /*    border: thick solid green;*/
  display: flex;
  flex: 5;
  align-items: center;
  justify-content: flex-start;
}


/* HEADER RIGHT SIDE */

.header_right_container {
  display: flex;
  flex: 3;
  /*    border: thick solid yellow;*/
  justify-content: center;
}

.header_right_container_inner_left {
  display: flex;
  /*    border: thick solid green;*/
  flex: 4;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
}

li {
  /*    display:inline;*/
  padding: 10px;
}

a {
  display: flex;
  flex-wrap: nowrap;
  color: white;
  font-size: 12px;
}

.search_input_input {
  flex: 1;
  color: white;
  background-color: #003580;
  margin: 0;
  border: 0px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 333;
  height: 45px;
  text-align: center;
  resize: none;
  outline: none;
  cursor: pointer;
  width: 99px;
}

.search_input_widget {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: #003580;
  margin: 0;
  padding-left: 6%;
  border: 0;
  text-align: center;
  cursor: pointer;
  width: 120px;
}

.header_right_container_inner_left_list {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  list-style-type: none;
}

.header_right_container_inner_center {
  display: flex;
  /*    border: thick solid green;*/
  flex: 1;
  justify-content: flex-end;
}

.header_right_container_inner_center_button {
  display: flex;
  align-items: center;
  /*    background-color: #E00000;*/
  border: 1px solid #003580;
  border-radius: 6px;
  padding: 0 25px;
  margin-left: 12px;
  /*    color: white;*/
  font-size: 15px;
  font-weight: 333;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  resize: none;
  outline: none;
}

.header_right_container_inner_right {
  display: flex;
  /*    border: thick solid green;*/
  flex: 1;
  justify-content: center;
}

.header_right_container_inner_right_button {
  display: flex;
  align-items: center;
  background-color: #febb02;
  border: 1px solid #003580;
  border-radius: 6px;
  padding: 0 25px;
  margin-left: 12px;
  color: black;
  font-size: 15px;
  font-weight: 333;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  resize: none;
  outline: none;
}

select.select_city_header {
  border: 1px solid #fff;
  /*    background-color: rgba(255,255,255,.5);*/
  padding: 5px;
  margin-left: 15px;
  background-color: #003580;
  color: white;
  font-size: 12px;
}

.main_dashboard_container {
  display: flex;
  flex-wrap: nowrap;
}

.left_navbar {
  height: 90vh;
  flex: 1;
  background-color: #003580;
  border-bottom: 6px solid #003580;
}

.dashboard_buttons {
  font-family: 'Lato', sans-serif;
  padding: 12px 50px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: thin solid black;
  cursor: pointer;
  background-color: #003580;
  color: white;
}

.dashboard_buttons:hover {
  background-color: #39CCCC;
  color: white;
}

.dashboard_right_container_wrap {
  position: absolute;
  /*margin-top: 21%;*/
  overflow: auto;
}

.right_content {
  flex: 4;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /*margin-top: 1467px;*/
}

.profile_container {
  margin-bottom: 18%;
  /*position: absolute;*/
  /*display: flex;*/
  /*flex-direction: column;*/
  /*justify-content: flex-start;*/
  /*align-items: center;*/
}

.profile_title {
  text-align: center;
  font-size: 33px;
  font-weight: 333;
  color: #003580;
  padding: 12px;
}

.profile_form {
.

...
</body>

</html>

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

Encountered an issue retrieving two rows nested within a parent row using Bootstrap 4 and VueJs

Currently, I am working on a VueJs and Bootstrap4 component where my aim is to achieve a design similar to the one shown using the available bootstrap classes. After going through the documentation, I came across the customized classes h-75 and h-25 provi ...

htmlcssvue.jsbootstrap-4

Issue: The variable '$viewMap[...]' is either null or undefined

Unfortunately, my knowledge of jQuery/Javascript is quite limited. I am encountering a Javascript error when trying to change the "how did you hear about us" dropdown on a form. The error message states: Error: '$viewMap[...]' is null or not an ...

javascriptjquery

Place a user input field within a div element having the specified class

I am trying to insert an HTML input element into the following div: <div class="sss" style="padding-top:2px"> <center> <input value="test1" name="name1" type="submit" > <input value="test2" name="name2" type="submit"> </c ...

javascriptjqueryappend

Arranging a list using Flexbox with equal spacing between elements in each row containing three items

I'm struggling with aligning a flexbox list. I have a row of 3 elements, but when there are only 2 elements on the row, there's a gap in the middle. My goal is to have a row with 2 elements look like x x o. However, my current code displays the ...

htmlcsslistflexboxalignment

Using Bootstrap classes within a specified class declaration

Can you nest style classes within a single class? For example: .my-upper-class{ .hidden-md, .hidden-sm, .hidden-lg} ...

css

Using JavaScript/Angular to borrow a function and add additional parameters

In my scenario, I have a service function that requires a static parameter and a second custom parameter that changes based on the controller it is being used in. I am looking for a way for my controller/view to invoke this service function without havin ...

javascriptangularjscallbindcurrying

Upgrading from ng-router to ui-router in the Angular-fullstack application

issue 1: url:/home, templateUrl: 'index.html is appearing twice. problem 2: views: templateUrl: 'views/partials/main.html is not visible at all. What am I doing wrong? How can I effectively incorporate ui-router into yeoman's angular-fulls ...

javascriptangularjsexpressyeomanangular-ui-router

Generating a JavaScript object based on an array of keys

I'm currently grappling with a task that is proving to be quite challenging. I have a set of arrays structured like this: ['key1', 'key2', 'key3'] ['key1', 'key2', 'key4'] ['key1', ...

javascriptjqueryarraysjsonpojo

Which API is utilized by duojs for its JavaScript modules?

I am currently utilizing duojs, a front-end web development tool similar to browserify or component. With duojs, you can directly import css and js from the file itself without any external package manifests. While I'm trying to figure out how to wri ...

javascriptnode.jscommonjscomponent.ioduo.js

Stop the default drag behavior on an input range element in VueJS

Is there a way to disable the default drag functionality of an input range element without affecting the click feature? Users should be able to change values by clicking instead of dragging. <input type="range" min="0" max=& ...

javascripthtmlcssvue.jsvuejs2

Error in React Router when using TypeScript

Encountering errors while trying to set up router with React and TypeScript. https://i.sstatic.net/muSZU.png I have already attempted to install npm install @types/history However, the issue persists. Your assistance would be greatly appreciated. Thank y ...

javascriptreactjstypescriptredux

Tips on submitting a form without causing a page scroll to the top

I currently have a collection of conversations which are essentially multiple messages grouped together by the sender. For each conversation, there is a designated reply text box located below it. Whenever I input some text into the reply box and hit the ...

jqueryruby-on-railsrubyajax

Is it possible to load a JS file using Node.js's `

Is there a way to load the contents of a js file into a variable without it returning as an object? How can I achieve this? server.js const file = require("./server/file.js"); ctx.body = `${file}`; // The expected output is "(function () { ...

javascriptnode.js

What is the best way to make a trail follow my shapes on canvas?

In my current project, I have implemented a feature where shapes are generated by spinning the mouse wheel. One specific shape in focus is the triangle, but other shapes follow the same generation process. The goal is to create a trail that slowly fades ...

javascripthtmlcanvas

Navigating to different sections of a single page using Bootstrap

I'm feeling a bit lost when it comes to understanding how linking to an element within a page functions. As I delve into the starter template for Twitter Bootstrap, I encounter the following code snippet in the navbar: <ul class="nav navbar-nav"&g ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Using JavaScript to dynamically change the IDs of multiple select elements during runtime

I am facing an issue when trying to assign different IDs to multiple select elements at runtime. The number of select elements may vary, but I need each one to have a unique ID. Can anyone assist me in locating the select elements at runtime and assignin ...

javascriptjquery

Angular Markdown Styling: A Guide

Currently, I am using Angular and Scully. I would like to add style to the image in a markdown file within Angular, but I am unsure of how to accomplish this task. The image is currently displaying too large. Can anyone provide me with useful advice on how ...

cssangularsassmarkdownscullyio

working with html data in a bootstrap modal using javascript

Utilizing an id, I pass data to a bootstrap modal and link that id with stored data. $("#fruit").html($(this).data("fruit")); In addition, I am appending data to the bootstrap modal $('#mymodal').find('.modal-body').append('< ...

javascriptjqueryhtmltwitter-bootstrap

What is the most effective method for incorporating multi-line breadcrumb links in a React application?

I am currently working on implementing a multiline breadcrumb link feature for mobile and tablet devices. As users navigate through multiple folders, I need to handle scenarios where the number of links exceeds the maximum allowed in the breadcrumb contain ...

javascripthtmlcssreactjs

What sets Fetch Promise apart in terms of delivery success?

Struggling with using strapi in my project, as the fetch function returns a promise instead of JSON data This is my code : const [products, setProducts] = useState([]); useEffect(() => { (async () => { try { l ...

javascriptreactjsnode.js