Multiple Hide/Show Buttons with Javascript

Question

I'm working on a website project for school. Currently I'm attempting to create a quiz with question and answers. I want the answers to be hidden and shown by buttons. At the moment I'm using a script the user "dimitryous" once uploaded.

I know that only one buttons works because the script uses ids and not classes. I'd like to change that but I have no idea how... Could you guys please help me out?

var button_beg = '<button id="button" onclick="showhide()">', button_end = '</button>';
var show_button = 'Show', hide_button = 'Hide';
function showhide() {
    var div = document.getElementById( "hide_show" );
    var showhide = document.getElementById( "showhide" );
    if ( div.style.display !== "none" ) {
        div.style.display = "none";
        button = show_button;
        showhide.innerHTML = button_beg + button + button_end;
    } else {
        div.style.display = "block";
        button = hide_button;
        showhide.innerHTML = button_beg + button + button_end;
    }
}
function setup_button( status ) {
    if ( status == 'Show' ) {
        button = hide_button;
    } else {
        button = show_button;
    }
    var showhide = document.getElementById( "showhide" );
    showhide.innerHTML = button_beg + button + button_end;
}
window.onload = function () {
    setup_button( 'hide' );
    showhide(); // if setup_button is set to 'show' comment this line
}

Damian Czapiewski · Accepted Answer · 2016-10-23 16:55:57Z

1

var buttons = document.querySelectorAll('.hide-show');
buttons.forEach(function (button) {
  button.onclick = function () {
    var content = this.parentNode.getElementsByTagName('span')[0];
    if (content.style.display !== 'none') {
      content.style.display = 'none';
      this.textContent = 'show';
    } else {
      content.style.display = 'inline';
      this.textContent = 'hide';
    }
  }
})

<div>
  <button class="hide-show">hide</button>
  <span>Content... 1</span>
</div>

<div>
  <button class="hide-show">hide</button>
  <span>Content... 2</span>
</div>

answered Oct 23, 2016 at 16:55

Damian Czapiewski

8897 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Timonswh Over a year ago

This works in the "Run code snippet" but not in my website. Furthermore the content needs to be hidden on load.

Collectives™ on Stack Overflow

Multiple Hide/Show Buttons with Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related