Switch between 2 sections with a click of a button (Implementing Javascript, HTML, and CSS)

Question

Switch between 2 sections with a click of a button (Implementing Javascript, HTML, and CSS)

There are two divs with different content inside, and I want to toggle between them using a button.

Here are my two divs with classes "step1Content" and "step2Content" respectively.

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

I have set the style display: block for step1Content.

.step1Content { display: block; }

I have set the style display: none for step2Content.

.step2Content { display: none; }

There is a button that should toggle between these two to show or hide.

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

Here is the JavaScript function:

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

However, when I click the button, nothing happens. Any idea why this might be occurring?

javascript html css

Answer 1

Answer №1

Just a reminder that

getElementsByClassName

will give you a collection of all elements in the document that have the specified class name, returned as a NodeList object.

You can also use either getElementById or querySelector

Check out this solution in action. I hope it can assist you!

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>

Answer 2

Just a reminder that

getElementsByClassName

will give you a collection of all elements in the document that have the specified class name, returned as a NodeList object.

You can also use either getElementById or querySelector

Check out this solution in action. I hope it can assist you!

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>

Answer 3

Answer №2

It's crucial to remember that the function is actually getElementsByClassName, not the commonly mistaken getElementByClassName. This function returns an array-like collection of elements, so be sure to use index 0 when accessing 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>

Answer 4

It's crucial to remember that the function is actually getElementsByClassName, not the commonly mistaken getElementByClassName. This function returns an array-like collection of elements, so be sure to use index 0 when accessing 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>

Answer 5

Answer №3

To easily toggle the visibility of a div, you can utilize the jQuery toggle function. For more information, check out http://api.jquery.com/toggle/

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

If you want to toggle two divs -

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>

Answer 6

To easily toggle the visibility of a div, you can utilize the jQuery toggle function. For more information, check out http://api.jquery.com/toggle/

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

If you want to toggle two divs -

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>

Answer 7

Answer №4

You have the ability to utilize Array.prototype.reverse() in order to switch the display of various 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>

Answer 8

You have the ability to utilize Array.prototype.reverse() in order to switch the display of various 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>

Switch between 2 sections with a click of a button (Implementing Javascript, HTML, and CSS)

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to guide a user to a specific page based on the choice they made after submitting a form?

Retrieve the current system datetime with just a click of a button

Dynamic banner image

Unexpectedly, Ajax call is triggering additional callbacks

Steps to exit browser in WebDriver Sampler in JMeter and halt execution

How come AJAX is not successfully processing the image file?

Any particular reason for Bootstrap v5 switching class names from .ml .mr to .ms .me?

Using rxjs for exponential backoff strategy

Updating a Mongoose document without overwriting existing values using FindOneAndUpdate

issue with AJAX POST request not functioning correctly upon form submission

Three JS tutorial: Slicing a 3D shape with a vertical plane

What is the best way to align a dropdown menu and a textbox on the same line

Things, their examples and the impact of setTimeOut

What is the method for implementing two-way binding on a checkbox in Angular?

An issue has been identified with the functionality of an Ajax request within a partial view that is loaded through another Ajax request specifically in

In search of a charts library that enables interactive, linked events

Analyzing Compatibility and Ensuring Security

Verification of Phone Numbers (Global)

Display or conceal button according to user SESSION in PHP for each iteration loop

What exactly is the significance of the </< in THREE.Camera.prototype.lookAt</<()?