Search
Question:
How to replace with hide/show div1 with div2 using onclick() and a function in JavaScript?

Summary:

To replace div1 with div2 and div2 with div3 using onclick(), first we have to create an HTML structure with div elements and a JavaScript function. The HTML defines divs with content, and the JavaScript function, triggered by a "Next" button, toggles visibility between div1, div2, and div3. 


With providing specific code, here we are outlining the conceptual approach, emphasizing the dynamic switching of divs upon button clicks. Tailoring the code to individual needs allows for a seamless transition between different content sections on a webpage, enhancing user interaction.


Solution:

Here is the code that is working just fine but is not executing the function show() from start to end or end to start.


const uppers = document.querySelectorAll(".upper");

const lowers = document.querySelectorAll(".lower");

let showIndex =0;

function show() {

  uppers[showIndex].style.display = lowers[showIndex].style.display = "none";

  showIndex = (showIndex + 1) % uppers.length;

  uppers[showIndex].style.display = lowers[showIndex].style.display = "block";

}


<div style="margin-left:30%;margin-bottom:20%;">

  <div id="div1" class="upper" style="display:block">

    <h2>one</h2>

  </div>

  <div id="div2" class="upper" style="display:none">

    <h2>two</h2>

  </div>

  <div id="div3" class="upper" style="display:none">

    <h2>three</h2>

  </div>

  <div id="div4" class="lower" style="display:block">

    <h2>one under</h2>

  </div>

  <div id="div5" class="lower" style="display:none">

    <h2>two under</h2>

  </div>

  <div id="div6" class="lower" style="display:none">

    <h2>three under</h2>

  </div>

  <button onclick=show()>click here</button>

</div>


Read more: >How to allign two plots in Matplotlib?


Else, you can also try this alternative way:

function showNext(cls) {

  const list = document.querySelectorAll(cls);

  const curr = document.querySelector(`${cls}:not(.hide)`);

  const next = ([...list].findIndex(el => el === curr) + 1) % list.length;

  curr.classList.add('hide');

  list[next].classList.remove('hide');

}


function show() {

  showNext(".upper");

  showNext(".lower");

}


.hide {

  display: none;

}


<div style="margin-left:30%;margin-bottom:20%;">

  <div id="div1" class="upper">

    <h2>one</h2>

  </div>

  <div id="div2" class="upper hide">

    <h2>two</h2>

  </div>

  <div id="div3" class="upper hide">

    <h2>three</h2>

  </div>




  <div id="div4" class="lower">

    <h2>one under</h2>

  </div>

  <div id="div5" class="lower hide">

    <h2>two under</h2>

  </div>

  <div id="div6" class="lower hide">

    <h2>three under</h2>

  </div>


  <button onclick=show()>click here</button>

</div>


Answered by: >Jaromanda X

Credit:> Stack Overflow


Suggested blogs:

>How to migrate `DateTimeField` to `DateField` in Django?

>Why VSCode indicate an error on using {{ }}?

>How to Set up the Android emulator?

>How to Set up the local environment for Angular development?

>How to solve encoding issue when writing to a text file, with Python?

>Step by Step guide to Deploy Terraform in Azure using GitHub Actions

>Testing react components using Hooks and Mocks

>AWS API Gateway: Ways to do REST API Versioning

>4 easy ways to select an AWS Profile when using Boto3 to connect to CloudFront

>How to use Wildcards to ‘cp’ a File Group with AWS CLI

>AWS EFS vs EBS vs S3: What are the best AWS storage options


Submit
0 Answers
Top Questions
19-02-2024

Understanding types of ‘syntax error’ in javascript

27-12-2023

Setup checkbox for multiple switch on change event of Javascript

18-01-2024

How to make next and previous button in pagination component work?

09-01-2024

What is the equivalent export format for conditional static required in ES6?

16-01-2024

How to take a whole line as argument In bash script?

Related Questions

How to include spaces between text to enter the consecutive text in next line in javascript?
img
Setup checkbox for multiple switch on change event of Javascript
img
Process to narrow down a union return type from a function in Javascript
img
What is the equivalent export format for conditional static required in ES6?
img
How to take a whole line as argument In bash script?
img