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.

You should never have more than 1 element with the same ID. Your JS is basically only going to change 1 of them, most likely the last one that it finds because it assumes that there is only 1. — Yesthe Cia
– Yesthe Cia, Commented Feb 17, 2016 at 14:27

Eric · Accepted Answer · 2016-02-17 19:25:28Z

2

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';
        }
    })();

answered Feb 17, 2016 at 19:25

Eric

2013 silver badges10 bronze badges

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

1 Comment

Ciarán Flanagan Over a year ago

thanks eric. Although I want to hide only the div clicked and display only the edit div that accompanies it.

Wais Kamal · Accepted Answer · 2021-05-08 13:28:54Z

1

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').forEach(item => {
    item.addEventListener("click", myFunction);
  });
  function myFunction() {
    this.hide;
  }
</script>

edited May 8, 2021 at 13:28

answered Nov 6, 2016 at 14:19

Wais Kamal

6,2503 gold badges21 silver badges47 bronze badges

Collectives™ on Stack Overflow

How To Hide And Display Multiple Divs using JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related