CODEWITHSUNDEEP
javascripthtmlcss
nanquim
nanquim

Reputation: 1924

Toggle elements

I have this function to toggle elements on click and it works, but I was wondering if there isn't a better solution that could not find

I don't want to use JQuery, only vanilla JS

This is the behavior I need:

  1. There is one icon that, when clicked, must disappear and show a div
  2. This div also has a close button that, when clicked, disappears and show the first icon back

Although my solution works, there are 2 problems:

  1. A CSS inline style (display: none), because that how I could change div's display value back to default (none)
  2. Div has to be display: none, but I would like it to be a flex container

What is the correct way to do this?

code:

function toggleMe() {
  var els = document.getElementsByClassName('togglable');
  for (var i = 0; i < els.length; i++) {
    if (els[i].style.display == 'none') {
      els[i].style.display = '';
    } else {
      els[i].style.display = 'none';
    }
  }
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<button id="btn" onClick="toggleMe()" class="togglable">
        <span id="icon-search" class="fa fa-search fa-5x"></span>
    </button>

<!-- voltar pro valor default do display só funciona com css inline -->
<div id="input-container" class="togglable" style="display: flex;">
  <input type="text" name="search" onkeyup="search(event);">

  <button onClick="toggleMe()">
             <span id="icon-close" class="fa fa-times"></span>
         </button>
</div>

Upvotes: 0

Views: 86

Answers (1)

Sivakumar Tadisetti
Sivakumar Tadisetti

Reputation: 5051

var btn = document.getElementById('btn');
var inputContainerBtn = document.getElementById('input-container-btn');
var inputContainer = document.getElementById('input-container');

btn.addEventListener('click', function() {
  btn.classList.toggle('hidden');
  inputContainer.classList.toggle('hidden');
});
inputContainerBtn.addEventListener('click', function() {
  inputContainer.classList.toggle('hidden');
  btn.classList.toggle('hidden');
});

function search(event) {
  console.log(event.target.value);
}
.input-container {
  display: flex;
}

.hidden {
  display: none;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<button id="btn">
    <span id="icon-search" class="fa fa-search fa-5x"></span>
</button>

<!-- voltar pro valor default do display só funciona com css inline -->
<div id="input-container" class="hidden">
  <input type="text" name="search" onkeyup="search(event);">

  <button id="input-container-btn">
    <span id="icon-close" class="fa fa-times"></span>
  </button>
</div>

Upvotes: 3

Related Questions