1

I have 2 groups of HTML, with the same number of elements in each group. The idea is when a button in the 1st group is clicked, it will display the element of the same index in the 2nd group.

There is a caveat however, when I click on a different element in the 1st group, the other elements in the 2nd group gets hidden.

I did come up with a solution below, but it feels impractical, because what if I have infinite elements..

I think it has to do with closures and keeping the index static, but I'm not sure how to approach it..

Thanks in advance

edit: trying to approach this with vanilla JS

HTML

<div class="a-container">
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
</div>

<div class="b-container">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

Javascript

var a = document.querySelectorAll("a");

var aClick = function(i){
  a[i].addEventListener("click", function(e){
    showP(i);  
    });
}

var p = document.querySelectorAll("p");

var showP = function(i) {
  p[0].classList.remove("active");  // impractical
  p[1].classList.remove("active");  // impractical
  p[2].classList.remove("active");  // impractical
  p[i].classList.add("active");
}

for (i = 0;i < a.length; i++) {
    aClick(i);
}

CSS

a {
  display: block;
}

.a-container {
  border:1px solid black;
}

.b-container {
  border:1px solid black;
  margin: 2% 0;
}

p {
  opacity: 0;
}

.active {
  opacity: 1;
}
  • You're not doing `a[0].addEventListener... a[1].addEventListener... a[2].addEventListener...` are you? So why are you doing `p[0].classList... p[1].classList... p[2].classList...`? – Niet the Dark Absol Apr 12 '17 at 16:11
  • ah good question. I only did that with the to show what I'm trying to accomplish. Is there a way to get the index of the clicked `a[i]` without having to write `a[0]...` `a[1]...` `a[2]...` separately? so if `a[0]`is clicked, `p[0]` gets displayed, but then when I click on `a[1]`, `p[0]` is hidden while `p[1]` is displayed. –  Apr 12 '17 at 16:18
  • *"...when I click on a different element in the 1st group, the other elements in the 2nd group gets hidden."* Is this the undesired behavior? – zer00ne Apr 12 '17 at 16:18
  • hey sorry for the confusion. that's actually the desired behavior. When I click on the 1st link, the 1st paragraph should get displayed. But then when I click the 2nd link, the 1st paragraph gets hidden, and the 2nd paragraph gets displayed. Basically, hide the `p` elements that don't match the clicked `a` index. –  Apr 12 '17 at 16:20
  • My point is, you're already doing a loop for one set of elements. Why not just use a loop for the second set instead of manually listing them? – Niet the Dark Absol Apr 12 '17 at 16:42
  • if I do `p[i].classList.remove("active")` then none of the paragraphs get hidden when a new link is clicked; https://jsfiddle.net/uf8pv3u5/3/ . So for each link I click, I want the paragraph of the same link index to be displayed, while the other paragraphs get hidden. –  Apr 12 '17 at 16:44

0 Answers0