Javascript: How do you fadeout one div and display another div?

Question

 <div> <h1>Posted Jobs</h1>   
  <div class="container gallery" id="Jobs" >

 </div>
</div>
<div class="Job applications" id="Application">
  <a>Applicants</a><br>
  <li class="entry" id="pos_1">
  </li>
</div>

this is the javascript for posted Jobs div. it retrieves entries from firebaseDB and display folders

   firebase.auth().onAuthStateChanged((user) => {
  if (user) {
        database = firebase.database();

      var BusinessesId = firebase.auth().currentUser.uid;
      var ref = database.ref('/Jobs/');
    ref.on('value', JobData,  errData);

  }
  })
         function JobData(data) { 

              var container = document.getElementById('Jobs'); 

              data.forEach(function(JobSnap) { // loop over all jobs
                var key = JobSnap.key;
                var Jobs = JobSnap.val();
                var newCard = `
                       <div class="thumbnail" id="${key}">
                           <span class="folder"><span class="file"></span></span>
                           <div class="title" id="Jobs">${Jobs.JobTitle}</div>
                        </div>
                    `;
              container.innerHTML += newCard;
              console.log(key);
              })
            }

then I have another JavaScript function for

   function ApplicationData(data) { 

          // var ref = database.ref('/Applications/');
          //    ref.on('value', JobData,  errData);

              var container = document.getElementById('Application'); 

              data.forEach(function(applicationSnap) { // loop over all jobs
                var key = applicationSnap.key;
                var application = applicationSnap.val();
                var newCard = `

                  <li class="entry" id="${key}">
                       <a>
                        <aside>
                          <strong>${application.ApplicantName}</strong>
                          <p>${application.ApplicantNumber} ${application.Applicantemail}</p>

                        </aside>
                        <img src="http://i.imgur.com/lIkWmas.png"/>
                        <i></i>
                      </a>
                      <ul>
                        <li style="background-color:#246f41"></li><li style="background-color:#f57b20"></li><li style="background-color:#433e42"></li>
                      </ul>
                    </li>
                    `;

              container.innerHTML += newCard;
              // console.log(key);
              })
            }

that displays entries of the entries of respective folders clicked in this format

this is my click handler

  $(window).load(function(event){
  $(".gallery").show();
  });
 var JobId = {};

 $('.container').on('click', '.folder', function(e){
 var ClickedJobId = $(this).closest("div").prop('id');
 JobId.value = ClickedJobId;

 alert(ClickedJobId);
 console.log(ClickedJobId);

 $('.gallery').removeclass();
 $('.applications').addClass('fade');
 // $('.return').fadeIn('fast');
  })

I have figured out how to save the id of clicked element. What I need to do is when a folder is clicked, I want the UI to fade out the folders and display the respective Applications. How do I do this effectively?

Answer 1

The following demo uses plain JavaScript to fade in out multiple <div> by using the classList.toggle() method on a click event.

Details commented in demo.

Demo

/* Collect all div.box into a NodeList
|| then convert it into an array
*/
var boxes = Array.from(document.querySelectorAll('.box'));

// Use the .map() method and pass the array...
boxes.map(function(box, idx) {

  /* Assign an onclick event handler on each
  || .box. The callback (i.e. toggleFade()) is
  || a function that's called whenever the
  || event that's registered is fired.
  */
  box.onclick = toggleFade;
  return box;
});

// Declare the callback...
function toggleFade(e) {

  /* ...and use the classList.toggle() method 
  || to toggle the .fade class on and off
  */
  this.classList.toggle('fade');
}

main {
  width: 500px;
  height: 100px;
  outline: 3px dashed red;
}

.box {
  width: 50px;
  height: 100px;
  display: inline-block;
  outline: 1px solid gold;
  margin: 0;
  background: rgba(0, 0, 0, .7);
  color: gold;
  cursor: pointer;
  text-align: center;
  font-size: 20px;
  /*-----Required Styles-----*/
  /* Normally invisible */
  opacity: 0;
  /* This animates all animatable properties
  || with a duration of .75 seconds with an
  || ease timing function.
  */
  transition: all .75s ease;
}


/*-----Required Ruleset-----*/
.box.fade {
  /* Visible */
  opacity: 1;
  /* Same as above */
  transition: all .75s ease;
}

<p>Place your cursor within the red dashed outline and click.</p>
<main>
  <div class='box'>A</div>
  <div class='box'>B</div>
  <div class='box'>C</div>
  <div class='box'>D</div>
  <div class='box'>E</div>
  <div class='box'>F</div>
  <div class='box'>G</div>
  <div class='box'>H</div>
  <div class='box'>I</div>
</main>
<p>The .box(es) should alternate between fading in and out on each click.</p>

Answer 2

You can use $.fadeIn() and $.fadeOut() and you can either run them at the same time, or if you pass one as a callback to the other, the second one will only run when the first one has completed.

$('.one').fadeOut('fast',function() {
  $('.two').fadeIn('fast');
})

.two {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">one</div>
<div class="two">two</div>