Assistance on creating dynamic menu pop ups -js

Question

What I'm trying to do

Alright so I basically want the div with the class js-op to pop up under each of the icons that are clicked on my side bar. Right now all I have is whenever a user clicks on the icons a popup well pops up.

What I'm trying to do

Ok so I ran though all the icons using a for loop, so that its being watched for any clicked actions. Im new to javascript so I think this is a huge accomplishment! Now Im a bit stuck, basically now I just want javascript to add the class .js-display found on the last line (.css) to the class js-op, respectfully. Meaning under each icon there is a div that has that class. (It is set to display:none) When that icon is clicked that div right under it will get the .js-display so that it becomes visible. I am essentially creating dynamic popup menus.

Extra

Im gonna end up asking later

Ok so this icon is clicked right? A panel displays, but the user decides to click on another icon. Is it possible to have the first panel that was displayed first, disappear?

Thank you

Again thank you!

Now if Im not suppose to have the extra thing in here please tell me, before down voting( I heard stack can be a little harsh) Im not sure, I feel like its still relevant to the main question.

js

var pop_action = document.getElementById("js-uX-pop_up").getElementsByClassName("uX-nv-spn ");
var pop_panel = document.getElementsByClassName("js-op");

for(e_op = 0; e_op < pop_action.length; e_op++ ){   

    pop_action[e_op].addEventListener("click", activate_eop);

}

function activate_eop(){
alert("hello");
}

html

Css

.xU-flex-1-1, .uX-bar-modules-wper, .uX-fluid, .uX-list-modules, .uX-side-nav li, html,
body, .uX-maon-sc, .uX-items-center, .uX-side-nav {
  display: flex;
  flex-flow: column; }

.xU-flex, .uX-side-nav {
  display: flex; }

.xU-flex-1-1, .uX-bar-modules-wper, .uX-fluid, .uX-list-modules, .uX-side-nav li {
  flex: 1 1 auto; }

.uX-side-nav li {
  justify-content: center; }

.uX_profile-img-wper {
  border-radius: 100%;
  overflow: hidden; }

.xU-font, .uX-side-nav .uX-nv-spn {
  font-size: 1.4rem;
  color: #c62f09; }

.uX-side-nav .uX-nv-spn:hover {
  background: lightgray; }

.uX-side-nav .uX-nv-spn:hover {
  border-radius: 100%; }

.uX-side-nav .uX-nv-spn {
  height: 2.2rem;
  width: 2.2rem;
  display: flex;
  justify-content: center;
  align-items: center; }

body {
  background: #f4f4f4; }
  body li {
    list-style-type: none; }

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; }

.xU-white {
  background: white; }

img {
  width: 100%;
  height: 100%; }

.uX-maon-wper, .uX-maon-sc2 {
  flex: 1 1 auto; }

.uX_profile-img-wper {
  height: 4rem;
  width: 4rem; }

.uX-items-center {
  align-items: center; }

.uX-bar-modules-wper .uX-company-img {
  width: 4.5rem;
  border-bottom: 1px solid lightgray; }

.uX-bar-modules-wper .uX-list-modules {
  padding: 0.4rem; }

.uX-side-nav {
  align-items: center;
  flex: 1 1 auto; }
  .uX-side-nav li {
    height: 100%; }
  .uX-side-nav .uX-nv-spn {
    padding: 0.4rem;
    border-radius: 100%; }

.uX-list-modules {
  border-right: 1px solid #c62f09; }

.js-display {
  display: block; }

/*# sourceMappingURL=XSystem.css.map */

Eric Nail · Accepted Answer

Your code is missing 'js-op' classes on all of the elements. Also, inline styles always override class/id styles, therefore you need to change

.js-display {display: block;}

to

.js-display {display: block !important;}

or it won't work.

You also didn't provide any JS here, so I had to just make it up, but you get the idea. This should do it:

document.querySelectorAll('.uX-side-nav li').forEach((el)=>{
  el.addEventListener('click', (e)=>{
    document.querySelectorAll('.js-op').forEach((x)=>{x.classList.remove('js-display');});
    e.target.closest('li').querySelector('.js-op').classList.add('js-display');
  });                                                    
});

.xU-flex-1-1, .uX-bar-modules-wper, .uX-fluid, .uX-list-modules, .uX-side-nav li, html,
body, .uX-maon-sc, .uX-items-center, .uX-side-nav {
  display: flex;
  flex-flow: column; }

.xU-flex, .uX-side-nav {
  display: flex; }

.xU-flex-1-1, .uX-bar-modules-wper, .uX-fluid, .uX-list-modules, .uX-side-nav li {
  flex: 1 1 auto; }

.uX-side-nav li {
  justify-content: center; }

.uX_profile-img-wper {
  border-radius: 100%;
  overflow: hidden; }

.xU-font, .uX-side-nav .uX-nv-spn {
  font-size: 1.4rem;
  color: #c62f09; }

.uX-side-nav .uX-nv-spn:hover {
  background: lightgray; }

.uX-side-nav .uX-nv-spn:hover {
  border-radius: 100%; }

.uX-side-nav .uX-nv-spn {
  height: 2.2rem;
  width: 2.2rem;
  display: flex;
  justify-content: center;
  align-items: center; }

body {
  background: #f4f4f4; }
  body li {
    list-style-type: none; }

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; }

.xU-white {
  background: white; }

img {
  width: 100%;
  height: 100%; }

.uX-maon-wper, .uX-maon-sc2 {
  flex: 1 1 auto; }

.uX_profile-img-wper {
  height: 4rem;
  width: 4rem; }

.uX-items-center {
  align-items: center; }

.uX-bar-modules-wper .uX-company-img {
  width: 4.5rem;
  border-bottom: 1px solid lightgray; }

.uX-bar-modules-wper .uX-list-modules {
  padding: 0.4rem; }

.uX-side-nav {
  align-items: center;
  flex: 1 1 auto; }
  .uX-side-nav li {
    height: 100%; }
  .uX-side-nav .uX-nv-spn {
    padding: 0.4rem;
    border-radius: 100%; }

.uX-list-modules {
  border-right: 1px solid #c62f09; }

.js-display {
  display: block !important; }

/*# sourceMappingURL=XSystem.css.map */

Assistance on creating dynamic menu pop ups -js

Answers (1)

Related Questions