How can I simplify toggle button code without using multiple methods

user_9627490 0
Viewed 65

I was wondering if there is a way to simplify this code.

HTML

 <div id="category-tabs">
    <a href="#" onclick="return false;"><i class="fas fa-toggle-on"></i></a>
 </div>

JS

const toggleBtn = document.querySelector('#category-tabs');
const toggleBtnI = document.querySelector('i');

const replFunction = () => {
  toggleBtnI.classList.contains('fa-toggle-on')
    ? toggleBtnI.classList.replace('fa-toggle-on', 'fa-toggle-off')
    : toggleBtnI.classList.replace('fa-toggle-off', 'fa-toggle-on');

  toggleBtn.classList.toggle('active');
};

toggleBtn.addEventListener('click', replFunction);
javascript
2 Answers

If you want to do it in the Vanilla JS. Then your code is correct you can only remove the variable and function declaration to short your code.

document.querySelector('#category-tabs').addEventListener('click', () => {
  document.querySelector('i').classList.contains('fa-toggle-on')
    ? document.querySelector('i').classList.replace('fa-toggle-on', 'fa-toggle-off')
    : document.querySelector('i').classList.replace('fa-toggle-off', 'fa-toggle-on');

  document.querySelector('#category-tabs').classList.toggle('active');
});
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div id="category-tabs">
    <a href="javascript:void"><i class="fa fa-toggle-on"></i></a>
 </div>

user_78438280 
const toggleBtn = document.querySelector('#category-tabs');
const toggleBtnI = document.querySelector('i');

const replFunction = () => {
  toggleBtnI.classList.toggle('fa-toggle-off');
  toggleBtn.classList.toggle('active');
};

toggleBtn.addEventListener('click', replFunction);
user_133265740
Related