title: I can make an div fade in onclick, but how do i make it fade out?
body: <p>I was working on making this TOS page but ran into a problem with the fade-in/fade-out animations.</p>
  <p>I got the div to fade in when the button is clicked but don't know how to let it fade-out when the button is clicked again. Any tips would be helpful</p>
  <p><a href="https://jsfiddle.net/MakkerHeineken/khs8b43f/1/" rel="nofollow noreferrer">https://jsfiddle.net/MakkerHeineken/khs8b43f/1/</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function unhideTOS() {
    document.getElementById("text").style.display = "";
  }
  
  function unlockBTN() {
    document.getElementById("text").style.display = "";
  }
  
  function scrollToAccept() {
    const terms = document.querySelector('.terms-and-conditions');
    const button = document.querySelector('.accept');
    // const watch = document.querySelector('.watch');
  
    if (!terms) {
      return; // quit function because there is no terms
    }
  
    // fires on page load because can't find element
    function obCallback(payload) {
      // console.log(payload[0].isIntersecting); // whether element is in view or not
      // console.log(payload[0].intersectionRatio); // how much of the element is showing
      if (payload[0].intersectionRatio === 1) {
        button.disabled = false;
        // stop observing the last element
        ob.unobserve(terms.lastElementChild);
      }
    }
  
    // takes in callback parameter
    // will be called every time it needs to check if something is currently on the page
    // watcher (needs to be told what to watch
    const ob = new IntersectionObserver(obCallback, {
      root: terms,
      threshold: 1,
    });
  
    // call observe method on what we want to watch
    // ob.observe(watch);
    ob.observe(terms.lastElementChild);
  
  }
  scrollToAccept();
  
  $('.yes').on('click', function(e) {
    e.preventDefault();
    $('.TOSHIDE').toggleClass('active');
    //$(this).parents('ul').next().toggleClass('active');
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #ffffff;
  }
  
  .wrapper-all {
    min-height: 94vh;
    display: grid;
    justify-content: center;
    align-content: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 2;
  }
  
  .wrapper {
    width: 400px;
    height: 80vh;
    padding: 20px;
    border: 1px solid black;
    background: white;
    display: grid;
    grid-template-rows: 1fr auto;
  }
  
  button {
    background: #133C55;
    color: white;
    font-size: 1rem;
    padding: 20px;
    transition: opacity 0.2s;
  }
  
  button[disabled] {
    opacity: 0.1;
    /* transform: translateX(-300%) scale(0.5); */
  }
  
  .terms-and-conditions {
    overflow: scroll;
  }
  
  footer {
    background-color: #192718;
    width: 100%;
    padding: 8px 0;
    margin-top: 8px;
  }
  
  footer .container {
    width: 800px;
    margin: 0 auto;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  
  footer .container a {
    color: #fff;
  }
  
  footer a:hover {
    color: #fce26a;
  }
  
  .tacbox {
    display: block;
    padding: 1em;
    margin: 2em;
    border: 3px solid #ddd;
    background-color: #eee;
    max-width: 800px;
  }
  
  input {
    height: 2em;
    width: 2em;
    vertical-align: middle;
  }
  
  .TOSHIDE {
    display: none;
  }
  
  .TOSHIDE.active {
    display: block;
    opacity: 1;
  }
  
  .fade-in-image {
    animation: fadeIn 5s;
    -webkit-animation: fadeIn 5s;
    -moz-animation: fadeIn 5s;
    -o-animation: fadeIn 5s;
    -ms-animation: fadeIn 5s;
  }
  
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  @-moz-keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  @-o-keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  @-ms-keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  .fade-out {
    animation: fadeOut ease 5s;
    animation-fill-mode: forwards;
  }
  
  @keyframes fadeOut {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="tacbox"&gt;
      &lt;!-- The code for the checkbox + download if checked. --&gt;
      I agree to these &amp;zwnj;&lt;a href="#tos" class="yes"&gt;Terms and Conditions.&lt;/a&gt;
      &lt;br&gt;
      &lt;a id="text" style="display:none" href="file.doc" Download&gt;Download!&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="TOSHIDE fade-in-image"&gt;
      &lt;div class="wrapper-all"&gt;
        &lt;div class="wrapper"&gt;
          &lt;div class="terms-and-conditions"&gt;
            &lt;h1&gt;Terms and Conditions&lt;/h1&gt;
            &lt;p&gt;Disclaimer THIS SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. You are the Current Maintainer of the Software, and to permit recipients of the Licensed Product for any such warranty, support,
              indemnity or liability obligations to one or more recipients of Covered Code. However, You may do so in a commercial product offering.&lt;/p&gt;
            &lt;hr&gt;
          &lt;/div&gt;
          &lt;button class="accept" disabled autocomplete="off" id="myCheck" onclick="unlockBTN()"&gt;Accept&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>