TOGGLE 2 DIVS with a Button (Using Javascript, HTML and CSS)

Question

Basically I have 2 divs both with different contents inside and I'd like to toggle between them with a button.

I have here my 2 divs with class "step1Content" and "step2Content" respectively.

<div class = 'step1Content'> Content1 </div>
<div class = 'step2Content'> AnotherContent </div>

I gave step1Content the style display: block.

.step1Content { display: block; }

I gave step2Content the style display: none.

.step2Content { display: none; }

I have a button that would toggle between these 2 to show or hide.

<button onclick = 'step2()'>2. Taskeros and Prices</button>

And my javascript function:

function step2(){
document.getElementByClassName('step1Content').style.display = 'none';
document.getElementByClassName('step2Content').style.display = 'block';
}

You'd think the results would be a okay right? Nope, when I click the button it does literally nothing. I have no idea why, any help with this?

w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle — Nouman Bhatti
– Nouman Bhatti, Commented Feb 3, 2017 at 4:21

HenryDev · Accepted Answer · 2017-02-03 04:32:37Z

1

Keep in mind that

getElementsByClassName

will return a collection of all elements in the document with the specified class name, as a NodeList object.

You can either use getElementById or querySelector

Here's a working solution. Hope it helps!

function step2(){
        if(document.querySelector('.step1Content').style.display === "none"){
            document.querySelector('.step2Content').style.display = 'none';
            document.querySelector('.step1Content').style.display = 'block';
        }else{
            document.querySelector('.step1Content').style.display = 'none';
            document.querySelector('.step2Content').style.display = 'block';
        }
    }

.step1Content { display: block; }
.step2Content { display: none; }

<button onclick = 'step2()'>2. Taskeros and Prices</button>
<div class= 'step1Content'> Content1 </div>
<div class = 'step2Content'> AnotherContent </div>

edited Feb 3, 2017 at 4:32

answered Feb 3, 2017 at 4:24

HenryDev

5,0136 gold badges31 silver badges70 bronze badges

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

Comments

Suchit kumar · Accepted Answer · 2017-02-03 04:42:19Z

1

The function is getElementsByClassName not getElementByClassName and it returns array-like collection of elements. so you need to use index 0 here for the first element.

function step2(){
  
 var element=document.getElementsByClassName('step1Content');
element[0].style.display = (element[0].style.display ==='none') ? 'block' : 'none';
 var element1= document.getElementsByClassName('step2Content');
  element1[0].style.display = (element1[0].style.display ==='block') ? 'none' : 'block';
}

.step1Content { display: block; }
.step2Content { display: none; }

<div class = 'step1Content'> Content1 </div>
<div class = 'step2Content'> AnotherContent </div>

<button onclick = 'step2()'>2. Taskeros and Prices</button>

edited Feb 3, 2017 at 4:42

answered Feb 3, 2017 at 4:21

Suchit kumar

11.9k3 gold badges26 silver badges46 bronze badges

3 Comments

guest271314 Over a year ago

.getElementsByClassName returns an HTMLCollection

guest271314 Over a year ago

HTMLCollection is not an Array. Note also that div elements display are not toggled at click at button at Answer.

Suchit kumar Over a year ago

@guest271314 yeah i mean ` array-like` collection of elements.

shahista inamdar · Accepted Answer · 2017-02-03 05:32:30Z

1

If you want to toggle visibility of div then you can use j-query toggle function. Please read http://api.jquery.com/toggle/

$("button").click(function(){
    $("#shay").toggle();
});

For Toggling two div -

CSS - .show { display: block; } .hide { display: none; }

    $("button").click(function(){
      $('#div1').toggle();
      $('#div2').toggle();
    });

</script>
<body>
<div class="hide" id="div1">Hi Div1</div>
<div class="show" id="div2">Hi Div2</div>
<button>Click me</button>

edited Feb 3, 2017 at 5:32

answered Feb 3, 2017 at 4:41

shahista inamdar

1863 silver badges13 bronze badges

Comments

guest271314 · Accepted Answer · 2017-02-03 04:23:55Z

0

You can use Array.prototype.reverse() to toggle display of div elements

.step1Content {
  display: block;
}
.step2Content {
  display: none;
}

<button onclick='step2()'>2. Taskeros and Prices</button>
<div class='step1Content'>Content1</div>
<div class='step2Content'>AnotherContent</div>
<script>
  var divs = Array.from(document.querySelectorAll("div[class^=step]"));
  function step2() {
    divs[0].style.display = "none";
    divs[1].style.display = "block";
    divs.reverse();
  }
</script>

answered Feb 3, 2017 at 4:23

guest271314

1

Collectives™ on Stack Overflow

TOGGLE 2 DIVS with a Button (Using Javascript, HTML and CSS)

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related