Ваниль Javascript ES6 эквивалент jQuery toggle ()?

Question

Эта jQuery toggle() функция работает отлично. Какова хорошая практика делать то же самое в ванили javascript (предпочтительно ES6)?

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

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

Answer 1

Native Toggle

Класс можно переключать с помощью 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>

Answer 2

Вы можете сделать что-то вроде этого:

Примечание: CSS только для того, чтобы мы могли проверить здесь.

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>

Answer 3

Если signUpForm и loginForm являются идентификаторами, то вы можете попробовать следующее:

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";
  }
}

Answer 4

Вы можете сделать это так.

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>