How to make only one div at the time appear upon selection from navbar buttons?

I’m trying to display the appropiate div only when clicking a button on the left navbar (and therefore not displaying all the others).

IE:

If I click "Profile" on the left navbar, the My Profile Form div will display (and all other will stay not displayed)

If I click "My Properties" on the left navbar, the My Properties div will display (and all other will stay not displayed)

And so on for all the other buttons.

How can I do that?

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'*/ }
})
@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;
  /*    color: white;*/
  /*border: thick solid red;*/
}

.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 {
  border: thin solid #003580;
  display: flex;
  flex-direction: column;
  /*align-items: flex-start;*/
  width: 666px;
  height: auto;
}

.profile_internal_container {
  border: thin solid #003580;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding: 6px;
}

.label_profile_form {
  /*border: thick solid green;*/
  width: 120px;
}

.input_profile_form {
  /*border: thick solid green;*/
  width: 160px;
  /*text-align: center;*/
  align-self: center;
  font-size: 15px;
  font-weight: 333;
  text-decoration: none;
  cursor: pointer;
  resize: none;
  outline: none;
  border: transparent;
  margin-left: 33px;
}

#inp,
#inp2 {
  /*text-align: center;*/
  margin: auto;
  width: 240px;
}

.profile_form_dropdown {
  font-size: 15px;
  font-weight: 333;
  /*text-align-last:center;*/
  border: 0;
  margin: 0;
  margin-left: 33px;
}

.profile_save_button_container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile_save_button {
  border: thin solid #003580;
  background-color: #003580;
  color: white;
  width: 180px;
  height: 45px;
  border-radius: 6px;
  padding: 0 25px;
  margin: 33px;
  font-size: 15px;
  font-weight: 333;
  cursor: pointer;
  resize: none;
  outline: none;
  text-align: center;
}

.profile_save_button:hover {
  background-color: #39CCCC;
  border: thin solid #39CCCC;
  color: white;
}

.ul_flex {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.my_properties_container {
  position: absolute;
}

.properties_dashboard {
  border: thick solid yellow;
  width: 666px;
  height: 350px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <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">
  <!--load all styles -->
  <title>Index</title>
</head>

<body id="body">
  <! -- HEADER START -->
  <header>
    <! -- HEADER LEFT SIDE CONTAINER START -->
    <div class="header_left_container">
      <div class="header_left_container_inner_left">
        <img class="logo" src="images/1.png" alt="">
      </div>
      <div class="header_left_container_inner_right">
        <form action="">
          <select class="select_city_header" name="emirate" id="emirate" style="border: 0;">
            <option value="dubai">Dubai</option>
            <option value="abu_dhabi">Abu Dhabi</option>
            <option value="ajman">Ajman</option>
            <option value="al_ain">Al Ain</option>
            <option value="dubai">Dubai</option>
            <option value="fujeirah">Fujairah</option>
            <option value="ras_al_khaimah">Ras Al Khaimah</option>
            <option value="sharjah">Sharjah</option>
            <option value="umm_al_qwain">Umm Al Qwain</option>
          </select>
        </form>
      </div>
    </div>
    <! -- HEADER LEFT SIDE CONTAINER STOP -->
    <! -- HEADER RIGHT SIDE CONTAINER START -->
    <div class="header_right_container">
      <div class="header_right_container_inner_left">
        <ul class="header_right_container_inner_left_list">
          <li><a href="#" style="text-decoration: none;">Residential</a></li>
          <li><a href="#" style="text-decoration: none">Commercial</a></li>
          <li><a href="#" style="text-decoration: none">Room</a></li>
          <li><a href="#" style="text-decoration: none">Short-Term</a></li>
          <!--I'll put in this 2 icons, monthly and daily-->
          <li><a href="#" style="text-decoration: none"><i class="far fa-envelope" style="padding-right:9px;"></i>Inbox</a></li>
        </ul>
        <div class="search_input_widget">
          <i class="fas fa-search" style="padding-right:9px;"></i>
          <input type="text" placeholder="Search" class="search_input_input">
        </div>
      </div>
      <div class="header_right_container_inner_center">
        <button class="header_right_container_inner_center_button">Login</button>
      </div>
      <div class="header_right_container_inner_right">
        <button class="header_right_container_inner_right_button">Place Your Ad</button>
      </div>
    </div>
    <! -- HEADER RIGHT SIDE CONTAINER STOP -->
  </header>
  <! -- HEADER STOP -->
  <div class="main_dashboard_container">
    <div class="left_navbar">
      <div class="sub">
        <ul class="ul_flex">
          <li class="dashboard_user_widget"><span class="span" style="min-height:350px;">&nbsp;</span></li>
          <li class="dashboard_buttons" id="profile_id"><i class="far fa-user" style="padding-right:9px;"></i>Profile</li>
          <li class="dashboard_buttons" id="properties_id"><i class="far fa-list-alt" style="padding-right:9px;"></i>My Properties</li>
          <li class="dashboard_buttons" id="bids_id"><i class="far fa-money-bill-alt" style="padding-right:9px;"></i>My Bids & Offers</li>
          <li class="dashboard_buttons" id="utilities_id"><i class="fas fa-file-contract" style="padding-right:9px;"></i>My Utilities & Ejari</li>
          <li class="dashboard_buttons" id="favourite_id"><i class="far fa-heart" style="padding-right:9px;"></i>Favourite Properties</li>
          <li class="dashboard_buttons" id="messages_id"><i class="far fa-envelope" style="padding-right:9px;"></i>Messages</li>
          <li class="dashboard_buttons" id="settings_id"><i class="fas fa-cogs" style="padding-right:9px;"></i>Settings</li>
        </ul>
      </div>
    </div>
    <div class="right_content">
      <div class="dashboard_right_container_wrap" style="position:absolute;">
        <div class="profile_container" id="profile_container" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Profile</h4>
          <form class="profile_form" id="profile_form">
            <div class="profile_internal_container">
              <label for="name" style="color: black;" class="label_profile_form">Name:</label>
              <input type="text" id="name" placeholder="Name" class="input_profile_form">
              <input type="text" placeholder="Family Name" class="input_profile_form">
            </div>
            <div class="profile_internal_container">
              <label for="nationality" style="color: black;" class="label_profile_form">Nationality:</label>
              <select id="nationality" class="profile_form_dropdown">
                <option value="">Italy</option>
                <option value="">Germany</option>
              </select>
            </div>
            <div class="profile_internal_container">
              <label for="day" style="color: black;" class="label_profile_form">Date of birth:</label>
              <select id="day" class="profile_form_dropdown">
                <option value="">22</option>
                <option value="">21</option>
              </select>
              <select class="profile_form_dropdown">
                <option value="">December</option>
                <option value="">January</option>
              </select>
              <select class="profile_form_dropdown">
                <option value="">1984</option>
                <option value="">2021</option>
              </select>
            </div>
            <div class="profile_internal_container">
              <label for="phone" style="color: black;" class="label_profile_form">Phone number:</label>
              <input type="number" id="phone" placeholder="+97150...." class="input_profile_form">
            </div>
            <div class="profile_internal_container">
              <label for="email" style="color: black;" class="label_profile_form">Email:</label>
              <input type="email" id="email" placeholder="email" class="input_profile_form">
            </div>
            <div class="profile_internal_container">
              <label for="password" style="color: black;" class="label_profile_form">Password:</label>
              <input type="password" id="password" placeholder="*******" class="input_profile_form">
            </div>
            <div class="profile_internal_container">
              <label for="passport" style="color: black;" class="label_profile_form">Passport:</label>
              <input type="text" id="passport" placeholder="Type Passport Number" class="input_profile_form">
              <input type="file" id="inp" class="input_profile_form">
            </div>
            <div class="profile_internal_container">
              <label for="eid" style="color: black;" class="label_profile_form">Emirates ID:</label>
              <input type="password" id="eid" placeholder="Type EID Number" class="input_profile_form">
              <input type="file" id="inp2" class="input_profile_form">
            </div>
          </form>
          <div class="profile_save_button_container">
            <button class="profile_save_button">Save</button>
          </div>
        </div>
        <div class="profile_container" id="my_properties_container" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Properties</h4>
          <div class="properties_dashboard">
          </div>
        </div>
        <div class="profile_container" id="my_bids" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Bids</h4>
          <div class="properties_dashboard">
          </div>
        </div>
        <div class="profile_container" id="my_utilities" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Utilities</h4>
          <div class="properties_dashboard">
          </div>
        </div>
        <div class="profile_container" id="my_favourites" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Favourites</h4>
          <div class="properties_dashboard">
          </div>
        </div>
        <div class="profile_container" id="my_messages" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Messages</h4>
          <div class="properties_dashboard">
          </div>
        </div>
        <div class="profile_container" id="my_settings" style="display:none">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Settings</h4>
          <div class="properties_dashboard">
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="main.js"></script>
</body>

</html>

126 thoughts on “How to make only one div at the time appear upon selection from navbar buttons?”

  1. How to make only one div at the time appear upon selection from navbar buttons? – JavaScript Help stromectol [url=https://ivermectinhum.com]generic ivermectin[/url] dosis tablet ivermectin 3 mg

    Reply