A Toggle Between 2 Elements In Pure Javascript

February 18, 2024 Post a Comment

I am writing a toggle in pure JavaScript. There are 2 input fields, 1 is hidden and the other is visible. When we click on the first 1, the second input should appear and when bo

Solution 1:

you can proceed like :

const inputs = [].slice.call(document.getElementsByClassName("input-bg"));
inputs.forEach((input) => {
  console.log()
  input.addEventListener("click", (event) => {
    const somehidden = inputs.filter((_input) => {
      return _input.getAttribute("class").match(/neww1/i);
    })
    if (somehidden.length > 0) {
      somehidden[0].classList.remove("neww1");
    } else {
      inputs.forEach((i) => {
        if (i !== event.target)
          i.classList.add("neww1");
      });

    }
  });
});

body {
  background: #873e66;
}

.grid {
  display: grid;
  grid-template-areas: "up""down";
}

form:focus-within {
  grid-area: up;
}

.input-bg {
  background: white;
  border: none;
  color: black;
  height: 50px;
  text-indent: 15px;
  width: 500px;
  border-radius: 26px;
  outline: none;
}

.neww1 {
  margin-top: 5px;
}

 ::-webkit-input-placeholder {
  color: black;
}

 ::-moz-placeholder {
  color: black;
}

 :-ms-input-placeholder {
  color: black;
}

.neww1 {
  display: none;
}

<divclass="grid"><formaction="#"class="navbar-top"role="search"autocomplete="off"><inputname="p"data-hit="Type"type="text"autocomplete="new-password"value=""data-open="false"class="input-bg neww"placeholder="Type "></form><formaction="#"class="navbar-top"role="search"autocomplete="off"><inputname="p"data-hit="Type"type="text"autocomplete="new-password"value=""data-open="false"class="input-bg neww1"placeholder="Type2 "></form></div>

Solution 2:

Although your requirement is not very clear but my answer might be of some help Let's say we have two input fields like this:

<div class="input-container">
  <inputtype="password" placeholder="Input 1" class="myInput first" />
  <inputtype="password" placeholder="Input 2" class="myInput second hidden" />
</div>

CSS can be like:

.input-container {
  display: flex;
  flex-direction: column;
}

.myInput {
  margin: 10px;
  padding: 5px
}
.first {
  order: 1;
}
.second {
  order: 2;
}

.hidden {
  display: none;
}

Now the toggle function (JS):

var allInputs = document.querySelectorAll('.myInput');
allInputs.forEach(function(node) {
    node.addEventListener("click", function(){
      var allHiddenInputs = document.querySelectorAll('.hidden');
      if(allHiddenInputs.length === 0) {
        allInputs.forEach(function(input) {
          input.classList.add("hidden");
          input.classList.add("second");
          input.classList.remove("first");
        });
        node.classList.remove("hidden");
        node.classList.remove("second");
        node.classList.add("first");
      } else {
        allHiddenInputs.forEach(function(input) {
          input.classList.remove("hidden");
        });
      }
    });
});

https://codepen.io/tusharshukla/pen/rrqvQz?editors=1010

Baca Juga

Solution 3:

Something like this could help you. I'm directly changing the CSS but you can also toggle classes using the classList.

<html><body><formaction="#"class="navbar-top"role="search"autocomplete="off"><inputname="p"id="input1"data-hit="Type"type="text"autocomplete="new-password"value=""data-open="false"class="input-bg neww"placeholder="Input One "></form><formaction="#"class="navbar-top"role="search"autocomplete="off"><inputname="p"id="input2"data-hit="Type"type="text"autocomplete="new-password"value=""data-open="false"class="input-bg neww1"placeholder="Input Two "></form><script>
        (function () {
            const inputOne = document.getElementById('input1');
            const inputTwo = document.getElementById('input2');

            consthandleClick = i => (i === inputOne ? inputTwo : inputOne)
                .style.display = 'none';

            consthandleBlur = i => {
                if (i === inputOne) {
                    inputTwo.style.display = 'block';
                    inputOne.style.display = 'none';
                } else {
                    inputTwo.style.display = 'none';
                    inputOne.style.display = 'block';
                }
            }

            [inputOne, inputTwo].forEach((i) => {
                i.addEventListener('click', () =>handleClick(i))
                i.addEventListener('focusout', () =>handleBlur(i))
            });
        })();
    </script></body></html>

Solution 4:

You have the classList attribute with your HTML Element. So first you need the element reference, you can use your constructor and private variables and set the private variable with document.getElementByClassName according to initial state of your page, or set an ID. Let's take for example an ID :

<form onclick="toggleClass()"id="password1" action="#" class="navbar-top" role="search" autocomplete="off"><input name="p" data-hit="Type"type="text" autocomplete="new-password" value="" data-open="false" class="input-bg neww" placeholder="Type "></form>

<form onclick="toggleClass()"id="password2" action="#" class="navbar-top" role="search" autocomplete="off"><input name="p" data-hit="Type"type="text" autocomplete="new-password" value="" data-open="false" class="input-bg neww1" placeholder="Type "></form>

Then just find the reference

const password1 = document.getElementById("password1");
const password2 = document.getElementById("password2");

and after that, you can write this function :

function toggleClass() {
  const password1 = document.getElementById("password1");
  const password2 = document.getElementById("password2");
  if (password1.classList.contains('hidden')){
    password1.classList.remove('hidden');
    password2.classList.add('hidden');
  }
  else {
    password2.classList.remove('hidden');
    password1.classList.add('hidden');
  }
}

.neww1 {
  background-color : red;
}
.neww {
  background-color : green;
}
.hidden {
  display:none;
}
input {
  margin:5px;
}

JavaScript Free

A Toggle Between 2 Elements In Pure Javascript

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "A Toggle Between 2 Elements In Pure Javascript"