Bollate

HTML

[ANSWERED] javascript – How to make different divs display in the same spot when clicked upon from a navbar?

By

Nov 19, 2022 , , ,

Solution 1 :

you have just to hide the other popups when you opening one but not just with visibility: hidden; because then they are still taking the space so for example display: none;

Problem :

I’m doing a user dashboard design and I want for all the different options for the user from the left navbar to appear in the same spot when clicked upon on the right side of the screen.

How can I make sure that all the divs from appear in the same spot when clicked upon, so that It will only show the select/clicked option from the navbar?

const Profile = document.getElementById("profile_id");
const ProfileContainer = document.getElementById("profile_container");
Profile.onclick = function() {
  if (ProfileContainer.style.visibility == 'visible') {
    document.getElementById('profile_container').style.visibility = 'hidden';
  } else {
    document.getElementById('profile_container').style.visibility = 'visible';
  }
}

const MyProperties = document.getElementById("properties_id");
const PropertiesContainer = document.getElementById("my_properties_container");
MyProperties.onclick = function() {
  if (PropertiesContainer.style.visibility == 'visible') {
    document.getElementById('my_properties_container').style.visibility = 'hidden';
  } else {
    document.getElementById('my_properties_container').style.visibility = 'visible';
  }
}

const MyBids = document.getElementById("bids_id");
const BidsContainer = document.getElementById("my_bids");
MyBids.onclick = function() {
  if (BidsContainer.style.visibility == 'visible') {
    document.getElementById('my_bids').style.visibility = 'hidden';
  } else {
    document.getElementById('my_bids').style.visibility = 'visible';
  }
}

const MyUtilities = document.getElementById("utilities_id");
const UtilitiesContainer = document.getElementById("my_utilities");
MyUtilities.onclick = function() {
  if (UtilitiesContainer.style.visibility == 'visible') {
    document.getElementById('my_utilities').style.visibility = 'hidden';
  } else {
    document.getElementById('my_utilities').style.visibility = 'visible';
  }
}

const MyFavourites = document.getElementById("favourite_id");
const FavouritesContainer = document.getElementById("my_favourites");
MyFavourites.onclick = function() {
  if (FavouritesContainer.style.visibility == 'visible') {
    document.getElementById('my_favourites').style.visibility = 'hidden';
  } else {
    document.getElementById('my_favourites').style.visibility = 'visible';
  }
}


const MyMessages = document.getElementById("messages_id");
const MessagesContainer = document.getElementById("my_messages");
MyMessages.onclick = function() {
  if (MessagesContainer.style.visibility == 'visible') {
    document.getElementById('my_messages').style.visibility = 'hidden';
  } else {
    document.getElementById('my_messages').style.visibility = 'visible';
  }
}

const MySettings = document.getElementById("settings_id");
const SettingsContainer = document.getElementById("my_messages");
MySettings.onclick = function() {
  if (SettingsContainer.style.visibility == 'visible') {
    document.getElementById('my_settings').style.visibility = 'hidden';
  } else {
    document.getElementById('my_settings').style.visibility = 'visible';
  }
}
@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;*/
  /*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: center;
  margin-top: 1467px;
}

.profile_container {
  /*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>
  <! -- 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="visibility: hidden;">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Profile</h4>
          <form class="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>
        <!--                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
        <!--                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
        <!--                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
        <div class="profile_container" id="my_properties_container" style="visibility: hidden;">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Properties</h4>
          <div class="properties_dashboard">
          </div>
        </div>
        <!--                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
        <!--                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
        <!--                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->

        <div class="profile_container" id="my_bids" style="visibility: hidden;">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Bids</h4>
          <div class="properties_dashboard">
          </div>
        </div>
        <!--                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
        <!--                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
        <!--                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
        <div class="profile_container" id="my_utilities" style="visibility: hidden;">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Utilities</h4>
          <div class="properties_dashboard">
          </div>
        </div>
        <!--                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
        <!--                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
        <!--                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
        <div class="profile_container" id="my_favourites" style="visibility: hidden;">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Favourites</h4>
          <div class="properties_dashboard">
          </div>
        </div>
        <!--                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
        <!--                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
        <!--                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
        <div class="profile_container" id="my_messages" style="visibility: hidden;">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Messages</h4>
          <div class="properties_dashboard">
          </div>
        </div>

        <!--                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
        <!--                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
        <!--                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
        <div class="profile_container" id="my_settings" style="visibility: hidden;">
          <!-- style="visibility: hidden;"-->
          <h4 class="profile_title">My Settings</h4>
          <div class="properties_dashboard">
          </div>
        </div>


      </div>
    </div>
  </div>
</body>

</html>

How to make multiple divs appear in the same spot when clicked upon?

By

Related Post

HTML

[ANSWERED] html – Trying to align a div to the right using CSS

Nov 20, 2022
HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] html – select all elements within a parent class

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022