Hide divs on click with "getElementsByClassName"

Question

I try to implement an event on a button. When i click it with .onclick event i will to hide a another div.

The problm is that i have a list with more divs with the same class and because of this the code is not wrking.

      <article class="content__box">
    <h1 class="content__title">About me</h1>
    <div class="content__hide"><span class="fa fa-minus"></span></div>
    <div class="content__text">
      <p>My text here</p>
    </div>
  </article>
  <article class="content__box">
    <h1 class="content__title">About me</h1>
    <div class="content__hide"><span class="fa fa-minus"></span></div>
    <div class="content__text">
      <p>My text here</p>
    </div>
  </article>

The idea is when i click on the class "content__hide" i will to hide the content__text from the element which it belongs.

Jsfiddle link: https://jsfiddle.net/8ddx3kfz/

Thanks in advance !

Answer 1

I suggest you to use JQuery because it will be a lot easier in the future. To learn it you can use multiple tutorials on the internet like codecademy.com or www.w3schools.com.

This code is for hiding the text only but if you want it the other way let me know.

In your head element add:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

and then in script:

$(document).ready(function(){
$('.content__hide').click(function(){       
    $(this).siblings('.content__text').hide();
});

});

Answer 2

Replace your arguments in both functions with the content block that's being altered. As others have stated in the comments, getElementsByClassName will return a HTML collection vs. one singular element. querySelectorAll (which grabs just one element) wouldn't work too great either which is why I suggest just passing in the element itself.

Once again you're trying to add event handler to an HTML collection. You'll need convert the collection to an array using Array.from() or Array.prototype.forEach.call() to loop through and individually assign a handler to each button.

In the event handler remove the arbitrary variable and instead check the visibility of the content block itself. There's many ways to find the block but since they're direct siblings this.nextElementSibling will suffice. Lastly you check whether it is hidden, either inline or from your stylesheet. Checking the stylesheet is a little bit costly but it's a measure you have to take since the blocks were not initially hidden inline on load.

var buttons = document.getElementsByClassName('content__hide');

function hide(content) {
  content.style.display = "none";
}

function show(content) {
  content.style.display = "block";
}

Array.from(buttons).forEach(function(button) {
  button.addEventListener('click', function() {
    var content = this.nextElementSibling;
    var contentIsVisible = content.style.display === 'block' || getComputedStyle(content).display && getComputedStyle(content).display === 'block';

    if (contentIsVisible) {
      hide(content);
    } else {
      show(content);
    }
  });
});

.content__box {
  margin: 20px 0;
}

.content__title {
  font-weight: 400;
  color: #999;
  font-size: 26px;
  font-family: 'Montserrat', sans-serif;
  margin: 0px;
  display: inline-block;
}

.content__hide {
  float: right;
  display: inline-block;
  margin-top: 5px;
  cursor: pointer;
  font-size: 22px;
  color: #999;
}

.content__text {
  background: #fff;
  padding: 12px;
  color: #000;
  margin: 10px 0;
}

.content__text p {
  margin: 0px 0px 12px 0px;
}

<article id="despre" class="content__box">
  <h1 class="content__title">Despre mine</h1>
  <button class="content__hide">Hide</button>
  <div class="content__text">
    <p>Lorem Ipsum este pur şi simplu o machetă pentru text a industriei tipografice. Lorem Ipsum a fost macheta standard a industriei încă din secolul al XVI-lea, când un tipograf anonim a luat o planşetă de litere şi le-a amestecat pentru a crea o carte
      demonstrativă pentru literele respective. Nu doar că a supravieţuit timp de cinci secole, dar şi a facut saltul în tipografia electronică practic neschimbată. A fost popularizată în anii '60 odată cu ieşirea colilor Letraset care conţineau pasaje
      Lorem Ipsum, iar mai recent, prin programele de publicare pentru calculator, ca Aldus PageMaker care includeau versiuni de Lorem Ipsum.</p>
    <p>Lorem Ipsum este pur şi simplu o machetă pentru text a industriei tipografice. Lorem Ipsum a fost macheta standard a industriei încă din secolul al XVI-lea, când un tipograf anonim a luat o planşetă de litere şi le-a amestecat pentru a crea o carte
      demonstrativă pentru literele respective. Nu doar că a supravieţuit timp de cinci secole, dar şi a facut saltul în tipografia electronică practic neschimbată. A fost popularizată în anii '60 odată cu ieşirea colilor Letraset care conţineau pasaje
      Lorem Ipsum, iar mai recent, prin programele de publicare pentru calculator, ca Aldus PageMaker care includeau versiuni de Lorem Ipsum.</p>
  </div>
</article>
<article id="despre" class="content__box">
  <h1 class="content__title">Despre mine</h1>
  <button class="content__hide">Hide</button>
  </div>
  <div class="content__text">
    <p>Lorem Ipsum este pur şi simplu o machetă pentru text a industriei tipografice. Lorem Ipsum a fost macheta standard a industriei încă din secolul al XVI-lea, când un tipograf anonim a luat o planşetă de litere şi le-a amestecat pentru a crea o carte
      demonstrativă pentru literele respective. Nu doar că a supravieţuit timp de cinci secole, dar şi a facut saltul în tipografia electronică practic neschimbată. A fost popularizată în anii '60 odată cu ieşirea colilor Letraset care conţineau pasaje
      Lorem Ipsum, iar mai recent, prin programele de publicare pentru calculator, ca Aldus PageMaker care includeau versiuni de Lorem Ipsum.</p>
    <p>Lorem Ipsum este pur şi simplu o machetă pentru text a industriei tipografice. Lorem Ipsum a fost macheta standard a industriei încă din secolul al XVI-lea, când un tipograf anonim a luat o planşetă de litere şi le-a amestecat pentru a crea o carte
      demonstrativă pentru literele respective. Nu doar că a supravieţuit timp de cinci secole, dar şi a facut saltul în tipografia electronică practic neschimbată. A fost popularizată în anii '60 odată cu ieşirea colilor Letraset care conţineau pasaje
      Lorem Ipsum, iar mai recent, prin programele de publicare pentru calculator, ca Aldus PageMaker care includeau versiuni de Lorem Ipsum.</p>
  </div>
</article>

Answer 3

for(let btn of document.getElementsByClassName('content__hide')){
  btn.onclick=function(){
    this.parentNode.querySelector(".content__text").style.display="none";
  }
}

This would work. The code has 2 problems. First, when you get more than one elements. You need to use for to set up onClick function for all the buttons. Second, They don't have id attributes. So you need to use other way to locate the element you want to hide. Here I get the parent element of the button and find the target to hide.

Answer 4

Imagine I have a icon (<i>) I use as a button with the id="searchbutton" and I want to display a textbox if I click on it and if it's on and I click again, I want it to disappear. Try this:

<i class="fa fa-search" aria-hidden="true" id="searchbutton"></i>
<input id="searchtext" type="text">

JS using jquery:

var isSearchOn = false;

$('#searchbutton').click(event, function() {
  if (isSearchOn) 
  {
     $('#searchtext').hide();
     isSearchOn = false; 
  }
  $('#searchtext').show();
  isSearchOn = true;
}