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

Question

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">

javascript html jquery css

Answer 1

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

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 3

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>

Answer 4

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>

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

Answer №1

Answer №2

This solution is effective and functional.

Similar questions

In search of a comprehensive demonstration of how to use JQuery/Ajax for pinging with success and failure detection

What is the process for converting a link into an image for embedding?

Unable to display "xyz" using console.log() function upon button click

Struggling with a malfunctioning Bootstrap dropdown that refuses to drop down

What steps are involved in uploading data to serve as a filter while running a PHP script to retrieve data from an SQL database?

What is the best way to handle responses in axios when dealing with APIs that stream data using Server-Sent Events (S

Consistent Errors with AJAX POST Requests Despite CORS Enablement

Text alignment post-rotation

Fetching a Wikipedia page using AJAX or the fetch() method

modify the inherent CSS property

Combining an Angular factory with another factory

What are the steps to troubleshoot a Vue application?

What is the reason behind negative numbers appearing as "5-" rather than "-5" in the basic calculator coded using HTML and JavaScript?

A guide on detecting overflow in a React functional component

Utilizing the keyword 'this' within a function of a JavaScript class that is invoked with the .map method

How can I utilize the pick parameter in nuxtjs3 useFetch for selecting arrays or performing a deep pick?

Is it Possible to Insert Function from a For... in Loop?

What is the best way to spin an element around its center?

Refresh the datatable automatically when a field is updated without the need for AJAX requests

Is your URL getting cut off in jQuery?