Show content of 2 divs with same div class name, using onclick

Question

I need to make 2 div content visible by pressing a button. I do not use "getElementsById" since the Id should be unique. The divs will be in different location so I cannot wrap then with another div. I am aiming of using plain JS.

Background for doing this is to have a button for demos where one iframe will show an app, and the other iframe will show the app description. The button click should therefor activate 2 divs (that are spreadout in the code).

function display_both_divs() {
    document.getElementsByClassName('boxes').style.display = "block";
}

body {
    background-color: pink;
}

.boxes {
    display: none;
}

.button {
    width: 200px;
    height: 60px;
}

    <button
        class="button"
        type="button"
        name="button"
        onclick="display_both_divs()"
    >   Show boxes content
    </button>

    <div class="boxes">box_1</div>
    <div class="boxes">box_2</div>

store the `.boxes` in a variable after getting them with `getElementsByClassName`, then loop throught it using a `for` and displaying each one. `getElementsByClassName` gives you an array-like object of HTML elements, so it doesn't have a `.style` property, thats why it don't work as you expect — Calvin Nunes, Sep 13 '19 at 12:26
Possible duplicate of [Can't change style : display using getelementbyclassname](https://stackoverflow.com/questions/45012378/cant-change-style-display-using-getelementbyclassname) — Calvin Nunes, Sep 13 '19 at 12:32

score 2 · Answer 1 · answered Sep 13 '19 at 12:31

You need to loop over the elements retrived by getElementsByClassName:

function display_both_divs() {
    Array.from(document.getElementsByClassName('boxes')).forEach(e => e.setAttribute('style','display:block'));
}

body {
    background-color: pink;
}

.boxes {
    display: none;
}

.button {
    width: 200px;
    height: 60px;
}

<button
        class="button"
        type="button"
        name="button"
        onclick="display_both_divs()"
    >   Show boxes content
    </button>

    <div class="boxes">box_1</div>
    <div class="boxes">box_2</div>

look here: JS: iterating over result of getElementsByClassName using Array.forEach

Pushprajsinh Chudasama · Answer 2 · 2019-09-13T12:45:48.383

You can do this using JQuery.

function display_both_divs() {
   $('.boxes').css('display','block') 
}

body {
    background-color: pink;
}

.boxes {
    display: none;
}

.button {
    width: 200px;
    height: 60px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button
        class="button"
        type="button"
        name="button"
        onclick="display_both_divs()"
    >   Show boxes content
    </button>

    <div class="boxes">
      <div>box_1</div>
    <div>box_2</div>
</div>

score 0 · Answer 3 · answered Sep 13 '19 at 12:41

0

You could put both the div within another div and set show/hide that div using unique id

HTML

<div id="superbox">
    <div class="boxes">box_1</div>
    <div class="boxes">box_2</div>
</div>

Script

function display_both_divs() {
    document.getElementById('superbox').style.display = "block";
}

answered Sep 13 '19 at 12:41

Shikhar Tandon

154
5

I updated my question. The divs will be spread out and I cannot wrap them directly. – Toolbox Sep 13 '19 at 12:44

score 0 · Answer 4 · answered Sep 13 '19 at 12:51

Seems the most straightforward way is to utilize the fact that [getElementsByClassName] returns an array. I can then specify each div named boxes. No loops, no frameworks needed:

function display_both_divs() {
    document.getElementsByClassName('boxes')[0].style.display = 'block';
    document.getElementsByClassName('boxes')[1].style.display = 'block';
}

Show content of 2 divs with same div class name, using onclick

4 Answers4