ff6347 · June 24, 2022 11:04
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <style>
    html, body {
  height: 100%;
  width: 100%;
 }

 .content{
  min-height:100px;
  min-width: 100px;
 }

 .hidden{
  /*visibility: hidden;*/
  display: none;
 }

 #one{
  background-color: red;
 }

 #two{
  background-color: green;
 }

 #three{
  background-color: blue;
 }
  </style>
 </head>

 <body>
  <div id="one" class="content hidden">

  </div>
  <div id="two" class="content hidden">

  </div>
  <div id="three" class="content hidden">

  </div>
  <button id="toggle">toggle visibliity</button>

  <!--
  This script places a badge on your repl's full-browser view back to your repl's cover
  page. Try various colors for the theme: dark, light, red, orange, yellow, lime, green,
  teal, blue, blurple, magenta, pink!
  -->
  <script>
 document.addEventListener('DOMContentLoaded',function() {
    const button = document.querySelector("button#toggle");
  console.log(button);
  const elements = document.querySelectorAll(".content");
  let selector = 0;
  button.addEventListener("click",()=>{
      if(elements.item(selector).classList.contains("hidden")){
        elements.item(selector).classList.remove("hidden");
      }
    elements.forEach((e,i, arr)=>{
      if(i !== selector){
        e.classList.add("hidden");
      }
    });
    selector = selector + 1;
    if(selector === elements.length){
      selector = 0;
    }

  })
 });
  </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>replit</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
	<style>
	html, body {
	height: 100%;
	width: 100%;
	}

	.content{
	min-height:100px;
	min-width: 100px;
	}

	.hidden{
	/visibility: hidden;/
	display: none;
	}

	#one{
	background-color: red;
	}

	#two{
	background-color: green;
	}

	#three{
	background-color: blue;
	}
	</style>
	</head>

	<body>
	<div id="one" class="content hidden">

	</div>
	<div id="two" class="content hidden">

	</div>
	<div id="three" class="content hidden">

	</div>
	<button id="toggle">toggle visibliity</button>

	<!--
	This script places a badge on your repl's full-browser view back to your repl's cover
	page. Try various colors for the theme: dark, light, red, orange, yellow, lime, green,
	teal, blue, blurple, magenta, pink!
	-->
	<script>
	document.addEventListener('DOMContentLoaded',function() {
	const button = document.querySelector("button#toggle");
	console.log(button);
	const elements = document.querySelectorAll(".content");
	let selector = 0;
	button.addEventListener("click",()=>{
	if(elements.item(selector).classList.contains("hidden")){
	elements.item(selector).classList.remove("hidden");
	}
	elements.forEach((e,i, arr)=>{
	if(i !== selector){
	e.classList.add("hidden");
	}
	});
	selector = selector + 1;
	if(selector === elements.length){
	selector = 0;
	}

	})
	});
	</script>
	</body>

	</html>