sideBar.html

<div id='sidebar'>
  <div class="tab">
    <button class="tablinks" onclick="openTab(event, 'Term')">Term</button>
    <button class="tablinks" onclick="openTab(event, 'Users')">Users </button>
    <button class="tablinks" id="close">
      <img id="backButton" src="http://www.yofes.org/wp-content/uploads/intense-cache/icons/plugin/font-awesome/angle-left.svg">
    </button>
  </div>


  <div id="Term" class="tabcontent">
    <div id="term">
      <h1>Sun</h1>
    </div>
    <div id="picDiv"
      <img id="pic" src='http://nineplanets.org/images/thesun.jpg'>
    </div>
    <div id='def'>
      <h3>The definition of the sun is this massive red ball whats gucci </h3>
    </div>


    <div id='ownDefinition'>
      <h4> Write your own definition </h4>
      <textarea id='textAreaDefinition' rows="4" cols="50" placeholder="contribute your definition here"></textarea>
      <button type='submit' id='submit-def'> Submit </button>
    </div>

  </div>

  <div id="Users" class="tabcontent">
    <h1 style="text-align:center"> Sun </h1>
    <div class="user_review">
      <div id='ratings'>
        <img class='upvote' src='https://d30y9cdsu7xlg0.cloudfront.net/png/341245-200.png'>
        <span class='upvote_num'> 32 </span>
        <img class='downvote' src='https://d30y9cdsu7xlg0.cloudfront.net/png/341238-200.png'>
      </div>

       <div>
          <h4> OG Bobby Johnson  </h4>
          <h6> The sun is really litty. it's awesom e. lorem ismpsum ti fdafas
          fsdfsadfs that is alewome  </h6>
      </div>
    </div>

    <div class="user_review">
      <div id='ratings'>
        <img class='upvote' src='https://d30y9cdsu7xlg0.cloudfront.net/png/341245-200.png'>
        <span class='upvote_num'> 25 </span>
        <img class='downvote' src='https://d30y9cdsu7xlg0.cloudfront.net/png/341238-200.png'>
      </div>

       <div>
          <h4>Caroline Whatevber</h4>
          <h6> The sun is really litty. it's awesom e. lorem afas
          fsdfsadfs that is alewome  </h6>
      </div>
    </div>

   <div class="user_review">
      <div id='ratings'>
        <img class='upvote' src='https://d30y9cdsu7xlg0.cloudfront.net/png/341245-200.png'>
        <span class='upvote_num'> 25 </span>
        <img class='downvote' src='https://d30y9cdsu7xlg0.cloudfront.net/png/341238-200.png'>
      </div>
       <div>
          <h4>Jason Kuo</h4>
          <h6> Big hypebeast fuck ya oooooooooooooooooooooo lets gooo
          fsdfsadfs that is alewome  </h6>
      </div>
    </div>

  </div>


  <div id="loggedInUser">
    <h6> Currently Logged in as: Bobby@gmail.com </h6>
    <button type='submit'> Log out </button>
  </div>



  <script>
    function openTab(evt, cityName) {
      // Declare all variables
      var i, tabcontent, tablinks;

      // Get all elements with class="tabcontent" and hide them
      tabcontent = document.getElementsByClassName("tabcontent");
      console.log('tabcontent');
      for (i = 0; i < tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
      }
      // tabcontent[0].style.display = 'block' //display term

      // Get all elements with class="tablinks" and remove the class "active"
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
      }

      // Show the current tab, and add an "active" class to the button that opened the tab
      document.getElementById(cityName).style.display = "block";
      evt.currentTarget.className += " active";
   }
   /*
   function closeTab() {
     console.log('trying to close tab');
     var element = document.getElementById('sidebar');
     console.log('element');
     element.style.display = "none"
   }
   */
  </script>
</div>