elements with the same class name in javascript

Question

Im new to javascript because I skipped it and jumped to jquery and now Im writing a javascript code but I'm having trouble. I have multiple elements with the same class name and below each element is an a-tag. i want to hide/show the element upon clicking the button below it. How can i do this in javascript? (no jquery please).

HTML

<div>
 <div class="content">content 1</div>
 <a class="show-more" onclick="toggleText();" href="javascript:void(0);">Show more</a>
</div>
<div>
 <div class="content">content 2</div>
 <a class="show-more" onclick="toggleText();" href="javascript:void(0);">Show more</a>
</div>
<div>
 <div class="content">content 3</div>
 <a class="show-more" onclick="toggleText();" href="javascript:void(0);">Show more</a>
</div>

CSS

.content {
 display: none;
}

Javascript

  var status = "less";
  function toggleText1() {
    if (status == "less") {
      document.getElementsByClassName("content")[0].style.display = 'block';
      document.getElementsByClassName("show-more")[0].innerText = "See Less";
      status1 = "more";
    } else if (status1 == "more") {
      document.getElementsByClassName("content")[0].style.display = 'none';
      document.getElementsByClassName("show-more")[0].innerText = "See More";
      status1 = "less";
    }   
  }

in my original code i named my content as content1,content2 and my a-tag as show-more1,show-more2 then my functions as toggleText1,toggleText2 and so on. It works but i find it inefficient. Can you guys guide me to the right path?

Solution

Here's one of methods how to solve it. Catch all the links, then use Array#forEach to iterate over them and bind click event to every element. Then find the div element in the parent node and toggle it's class from hidden to visible.

ES6 solution.

var elems = document.getElementsByClassName("show-more");

Array.from(elems).forEach(v => v.addEventListener('click', function() {
  this.parentElement.getElementsByClassName('content')[0].classList.toggle('hidden');
}));

.hidden {
  display: none;
}

<div>
  <div class="content">content 1</div>
  <a class="show-more" href="javascript:void(0);">Show more</a>
</div>
<div>
  <div class="content">content 2</div>
  <a class="show-more" href="javascript:void(0);">Show more</a>
</div>
<div>
  <div class="content">content 3</div>
  <a class="show-more" href="javascript:void(0);">Show more</a>
</div>

ES5 solution.

var elems = document.getElementsByClassName("show-more");

for (var i = 0; i < elems.length; i++){
  elems[i].addEventListener('click', function(){
    this.parentElement.getElementsByClassName('content')[0].classList.toggle('hidden');
  })
}

.hidden {
  display: none;
}

<div>
  <div class="content">content 1</div>
  <a class="show-more" href="javascript:void(0);">Show more</a>
</div>
<div>
  <div class="content">content 2</div>
  <a class="show-more" href="javascript:void(0);">Show more</a>
</div>
<div>
  <div class="content">content 3</div>
  <a class="show-more" href="javascript:void(0);">Show more</a>
</div>

Comments

[Ju66ernaut]

Should note that this requires the use of es6+

[kind user]

@Ju66ernaut How can i do this in javascript? - isn't ES6 Javascript?

[Ju66ernaut]

Indeed it is. However it is STILL not used by everyone who uses javascript. I am pointing it out because the OP does not use any es6+ syntax in his code

[kind user]

@Ju66ernaut Don't you think that it's modern enough that everyone should use it? And by the way - what do you think, should I teach OP some old and probably soon deprecated methods or try to make him friendly with the newest JS patterns?

[Ju66ernaut]

It should be used by now, but it still doesn't have 100% support across all browsers. I am merely trying to point something out to the OP so he/she understands this may not work out of the box for them. It is not an affront to your answer.

[kind user]

@Ju66ernaut Fine, my friend.

[SGventra]

tnx for the quick response. interesting answer, very short and its working. might need some explanation though, sorry I'm new in javascript. I noticed that you used children[0], will it still work if i have 2 or more contents above my div.content element?

[kind user]

@SGventra I've edited my answer, so it will work every time.

[SGventra]

well, I'm remodelling a page for ebay and since ebay doesn't quite support jquery in its iframe so im trying to do some functions through javscript.

[kind user]

@JonP Yeah, but you know. OP didn't ask for performance on every browser available. Anyways - IE is almost dead.

[Jon P]

But it's not dead yet and IE 11 still has a 3.6% global usage, more than Edge, so that is not an insignificant number of users. (caniuse.com/#feat=arrow-functions). Personally, I would supply your modern version and a "classic" version so the OP can decide on what he want's to support.

[kind user]

@JonP I've added a solution which will work like everywhere.

[SGventra]

@Kinduser i like the use of this. so, i prefer your es5 solution its more clearer to me. been wanting to use $(this) from jquery just dont know how to do it in javascript. thanks.

[SGventra]

thanks for the nice concept in css. my only problem with this is having to change the elements id everytime.