How to change class and text of one tag by clicking on another tag?

Question

I don't know how to describe this without making it more complicated.
So look at the result of the code and click on the first link with "Show", then the second one and third one.
When the second link is clicked, first one closes but text remains "Hide" and i want it to change to "Show".
So, when clicking a link, detect if any other link has text "Hide" and change it to "Show".
And please no jQuery...

document.getElementsByClassName("show")[0].onclick = function() {
  var x = document.getElementsByClassName("hide")[0];
  var y = document.getElementsByClassName("show")[0];
  if (x.classList.contains("visible")) {
    x.classList.remove("visible");
    y.textContent = "Show";
  } else {
    closeOther();
    x.classList.add("visible");
    y.textContent = "Hide";
  }
};

document.getElementsByClassName("show")[1].onclick = function() {
  var x = document.getElementsByClassName("hide")[1];
  var y = document.getElementsByClassName("show")[1];
  if (x.classList.contains("visible")) {
    x.classList.remove("visible");
    y.textContent = "Show";
  } else {
    closeOther();
    x.classList.add("visible");
    y.textContent = "Hide";
  }
};

document.getElementsByClassName("show")[2].onclick = function() {
  var x = document.getElementsByClassName("hide")[2];
  var y = document.getElementsByClassName("show")[2];
  if (x.classList.contains("visible")) {
    x.classList.remove("visible");
    y.textContent = "Show";
  } else {
    closeOther();
    x.classList.add("visible");
    y.textContent = "Hide";
  }
};

function closeOther() {
  var visible = document.querySelectorAll(".visible"),
    i, l = visible.length;
  for (i = 0; i < l; ++i) {
    visible[i].classList.remove("visible");
  }
}

.style {
  background-color: yellow;
  width: 200px;
  height: 200px;
  display: inline-block;
}

.hide {
  background-color: red;
  width: 50px;
  height: 50px;
  display: none;
  position: relative;
  top: 50px;
  left: 50px;
}

.hide.visible {
  display: block;
}

<div class="style">
  <a href="#" class="show">Show</a>
  <div class="hide">

  </div>
</div>
<div class="style">
  <a href="#" class="show">Show</a>
  <div class="hide">

  </div>
</div>
<div class="style">
  <a href="#" class="show">Show</a>
  <div class="hide">

  </div>
</div>

Possible duplicate http://stackoverflow.com/questions/36162805/toggle-radio-input-using-css-only — Asons, Feb 21 '17 at 22:14
In above post there is several ways to do that using CSS only — Asons, Feb 21 '17 at 22:15
Not a duplicate since i am practicing javascript and want ways to do it in js only ... — mpasd, Feb 22 '17 at 05:26

Rounin · Answer 1 · 2017-02-21T16:46:03.417

I tried to write a solution which didn't use any javascript at all and worked using CSS alone. I couldn't get it to work though - CSS can identify focus but it can't identify blur (ie. when focus has just been removed).

So here is a solution which uses javascript and the classList API, instead:

var divs = document.getElementsByTagName('div');

function toggleFocus() {

    for (var i = 0; i < divs.length; i++) {
        if (divs[i] === this) continue;
        divs[i].classList.add('show');
        divs[i].classList.remove('hide');
    }

    this.classList.toggle('show');
    this.classList.toggle('hide');
}

for (let i = 0; i < divs.length; i++) {
    divs[i].addEventListener('click', toggleFocus, false);
}

div {
display: inline-block;
position: relative;
width: 140px;
height: 140px;
background-color: rgb(255,255,0);
}

.show::before {
content: 'show';
}

.hide::before {
content: 'hide';
}

div::before {
color: rgb(0,0,255);
text-decoration: underline;
cursor: pointer;
}

.hide::after {
content: '';
position: absolute;
top: 40px;
left: 40px;
width: 50px;
height: 50px;
background-color: rgb(255,0,0);
}

<div class="show"></div>
<div class="show"></div>
<div class="show"></div>

That's it, thanks! There are two correct answers here, and i have to pick one. Answer by Siphalor fits better in my current code, so i am picking his. But i will try and implement your version as well, for practice. — mpasd, Feb 22 '17 at 05:42

score 1 · Accepted Answer · answered Feb 21 '17 at 16:07

1

Like this?

Just added following to closeOther():

visible = document.querySelectorAll(".show"),
i, l = visible.length;
for (i = 0; i < l; ++i) {
visible[i].textContent="Show";
}

answered Feb 21 '17 at 16:07

Siphalor

712
5
16

Well this is embarrassing... I could have swore i tried that and it didn't work... I probably made a typo somewhere. Thanks, that's it... – mpasd Feb 22 '17 at 05:29

How to change class and text of one tag by clicking on another tag?

2 Answers2