SHARE
TWEET

boxes

a guest Nov 22nd, 2019 110 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.   <head>
  3.     <title>List of Colors</title>
  4.     <style>
  5.       .robi {
  6.         width: 200px;
  7.         position: absolute;
  8.         display: block;
  9.         top: 50%;
  10.         left: 50%;
  11.         transform: translate(-50%, -50%);
  12.       }
  13.       .box{
  14.         width: 200px;
  15.         height: 50px;
  16.         position: relative;
  17.         display: block;
  18.         background-color: red;
  19.         margin: 10px 0;
  20.         cursor: pointer;
  21.         transition: .3s;
  22.       }
  23.       .opened{
  24.           height: 150;
  25.           background-color: blue;
  26.       }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <div class="robi">
  31.       <div class="box"></div>
  32.       <div class="box"></div>
  33.       <div class="box opened"></div>
  34.     </div>
  35.     <script>
  36.         let boxes = document.querySelectorAll(".box");
  37.         for (let i = 0; i < boxes.length; i++) {
  38.            boxes[i].addEventListener('click', function(){
  39.               if (boxes[i].classList.contains("opened")){
  40.                    boxes[i].classList.remove("opened");
  41.               } else {
  42.                   boxes[i].classList.add("opened");
  43.                   if (i == 0) {
  44.                       boxes[i+1].classList.remove("opened");
  45.                       boxes[i+2].classList.remove("opened");
  46.                   } else if (i == 1) {
  47.                       boxes[i+1].classList.remove("opened");
  48.                       boxes[i-1].classList.remove("opened");
  49.                   } else if (i == 2) {
  50.                       boxes[i-1].classList.remove("opened");
  51.                       boxes[i-2].classList.remove("opened");
  52.                   }
  53.               }
  54.            });
  55.        }
  56.    </script>
  57.   </body>
  58. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top