0

This jQuery toggle() function is working great. What is good practice for doing the same in vanilla javascript (ES6 preferred)?

$("#sign_up_btn").click(function(e) {
    $(signUpForm).toggle("hide");
    $(loginForm).toggle("hide");
});

$("#login_btn").click(function(e) {
    $(signUpForm).toggle("hide");
    $(loginForm).toggle("hide");
});

4 Answers 4

6

Native Toggle

Class can be toggled natively via Element.classList.toggle:

const button = document.querySelector('#sign_up_btn');
button.addEventListener('click', e => {
  document.querySelector('.content').classList.toggle('hide')
})
.hide {
  display: none;
}
<button id="sign_up_btn">toggle</button>

<div class="content">Toggle this content</div>

2

You can do something like this:

Note: the CSS is just so we can test here.

document.getElementById('sign_up_btn').addEventListener('click', () => {
  var signUpForm = document.getElementById('signUpForm');
  var loginForm = document.getElementById('loginForm');
  
  if(window.getComputedStyle(signUpForm).display === "block") {
    signUpForm.style.display = "none";
    loginForm.style.display = "block";   
  } else {
    signUpForm.style.display = "block";
    loginForm.style.display = "none";
  }
});
#signUpForm {
  position: relative;
  float: left;
  background-color: #09f;
  width: 100px;
  height: 100px;
  display: block;
  margin-right: 20px;
}

#loginForm {
  position: relative;
  float: left;
  background-color: #f00;
  width: 100px;
  height: 100px;
  display: none;
}

#sign_up_btn {
  position: relative;
  float: left;
  margin-right: 20px;
}
<input type="button" id="sign_up_btn" value="Sign up" />

<div id="signUpForm">Sign up form</div>
<div id="loginForm">Log in form</div>

1

You can do this way.

var show = function (elem) {
	elem.style.display = 'block';
};

var hide = function (elem) {
	elem.style.display = 'none';
};

var toggle = function (elem) {

	// If the element is visible, hide it
	if (window.getComputedStyle(elem).display === 'block') {
		hide(elem);
		return;
	}

	// Otherwise, show it
	show(elem);

};

// Listen for click events
document.addEventListener('click', function (event) {

	// Make sure clicked element is our toggle
	if (!event.target.classList.contains('toggle')) return;

	// Prevent default link behavior
	event.preventDefault();

	// Get the content
	var content = document.querySelector(event.target.hash);
	if (!content) return;

	// Toggle the content
	toggle(content);

}, false);
<p>
  <a class="toggle" href="#example">Toggle Div</a>
</p>

<div class="toggle-content" id="example">
  Here's some text we want to toggle visibility of. Let's do it!
</div>

1
1

If signUpForm and loginForm are ids then you can try the following:

document.getElementById('sign_up_btn').addEventListener('click', function(){
  elToggle();
});

document.getElementById('login_btn').addEventListener('click', function(){
  elToggle();
});

function elToggle(){
  var s = document.getElementById('signUpForm');
  if (s.style.display == "none") {
    s.style.display = "block";
  } else {
    s.style.display = "none";
  }

  var l = document.getElementById('loginForm');
  if (l.style.display == "none") {
    l.style.display = "block";
  } else {
    l.style.display = "none";
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.