How To Hide And Display Multiple Divs using JavaScript

Question

How would I go about hiding and showing multiple divs using JavaScript? I don't want to use JQuery. I can make it work for hiding and showing one div but not multiple divs. The problem originates because I'm using PHP to display multiple records. These records are included in divs which have the same ID.

 document.getElementById( 'history-slider' ).addEventListener( 'click', function() { document.getElementById('edit-slider').style.display = 'block'; document.getElementById('history-slider').style.display = 'none'; }, false ); document.getElementById( 'edit-slider' ).addEventListener( 'click', function() { document.getElementById('history-slider').style.display = 'block'; document..getElementById('edit-slider').style.display = 'none'; }, false ); 

 .edit-slider { display: none; } 

 <div class="panel-body panel-strip" id="history-slider"> <h3>Title</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p> <img src="img/time_icon.png" class="time-icon"> <span class="hour-text">4.00 hrs</span> </p> </div> <hr class="calendar-divider"> <div class="panel-body panel-strip edit-slider"> <div class="row pull-right"> <a href="add.php"> <div class="col-xs-4 delete-panel"> <img src="img/delete_icon.png" class="edit-images center-block"><span class="text-center edit-texts">Delete</span> </div> </a> <a href="http://google.com/"> <div class="col-xs-4 edit-panel"> <img src="img/edit_icon.png" class="edit-images center-block"><span class="text-center edit-texts edit-text">Edit</span> </div> </a> <a href="http://google.com/"> <div class="col-xs-4 record-panel"> <img src="img/record_icon.png" class="edit-images center-block"><span class="text-center edit-texts">Record</span> </div> </a> </div> </div> 

HTML;

                    <div class="panel-body panel-strip" id="history-slider">
                        <h3>Title</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                        <p>
                          <img src="img/time_icon.png" class="time-icon"> <span class="hour-text">4.00 hrs</span>
                        </p>
                    </div>
            <hr class="calendar-divider">
            <div class="panel-body panel-strip edit-slider">
                <div class="row pull-right">
                    <a href="add.php">
                        <div class="col-xs-4 delete-panel">
                            <img src="img/delete_icon.png" class="edit-images center-block"><span class="text-center edit-texts">Delete</span>
                        </div>
                        </a>
                        <a href="http://google.com/">
                        <div class="col-xs-4 edit-panel">
                            <img src="img/edit_icon.png" class="edit-images center-block"><span class="text-center edit-texts edit-text">Edit</span>
                        </div>
                        </a>
                        <a href="http://google.com/">
                        <div class="col-xs-4 record-panel">
                            <img src="img/record_icon.png" class="edit-images center-block"><span class="text-center edit-texts">Record</span>
                        </div>
                        </a>
                    </div>
                </div>

JavaScript;

document.getElementById( 'history-slider' ).addEventListener( 'click', function() {

  document.getElementById('edit-slider').style.display = 'block';
  document.getElementById('history-slider').style.display = 'none';

}, false );

document.getElementById( 'edit-slider' ).addEventListener( 'click', function() {

  document.getElementById('history-slider').style.display = 'block';
  document..getElementById('edit-slider').style.display = 'none';

}, false );

I have also set in the CSS to hide the "edit-slider" div on page load.

.edit-slider {
    display: none;
}

The HTML is echoed out in a loop for every record in the database. Information is also added in replace of the placeholder text.

How should I best go about making it so that if a div if clicked it is hidden and the corresponding div is shown in it's place?

I was thinking about doing something about individually giving the divs separate ID's in PHP and than passing those ID's to JavaScript and creating some sort of a loop? My knowledge of JavaScript isn't massive so I don't really know how easy or difficult this method would be. Or is there a much easier method?

This is my first stack overflow post,so sorry if I'm doing anything wrong or missed something.

Answer 1

If you use classes instead of IDs you can use document.QuerySelectorAll() to get all the divs with that class and then show or hide as necessary.

Something like below would hide all divs with an edit-slider class and reveal (assuming they were already hidden) all divs with a history-slider class.

    (function() {
        var editSliders = document.querySelectorAll('div.edit-slider');
        for(var i=0;i<editSliders.length;i++){
            editSliders[i].style.display = 'none';
        }
        var historySliders = document.querySelectorAll('div.history-slider');
        for(var i=0;i<historySliders.length;i++){
            historySliders[i].style.display = 'block';
        }
    })();

Answer 2

First, consider using class instead of id to set multiple elements with the same attribute and value. Then, use the following script:

<script type="text/javascript">
  document.QuerySelectorAll('div.history-slider').setAttribute("onclick", "myFunction()");
  function myFunction() {
    this.hide;
  }
</script>