update tab ii - tab version

<!--

	UPDATE TAB II - TAB VERSION
		by alydae

		released: december 15, 2019

            - do not steal any part of this code
            - do not even TOUCH the credit
            - direct questions to enchantedthemes.tumblr.com

	thank you for using!!!

-->

<script>
$(document).ready(function(){
  $(".updclick").click(function(){
    $(".updcontent").fadeToggle(1000);
  });
});
</script>

<style type="text/css">

.updbox h1, .updbox h1:hover, .updinfo:before, .updinfo:hover:before  {
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
}

.updbox {
    position:fixed;
    width:160px;
    line-height:150%;
    padding:10px;
    top:10px;
    /* to position right: change left to right for this*/
    left:10px;
}

.updbox h1 {
    margin-left:5px;
    margin-bottom:13px;
    /* to position right: change left to right for these three */
    text-align:left!important;
    /* if you don't want the border, remove the following. */
    padding-left:10px;
    border-left:2px solid #eee; /* border colour */
}

.updbox h1:hover {
    cursor:pointer;
    color:#bad1e7; /* title colour on hover */
}

.updcontent { display:none; }

table { border-collapse:collapse; }
td { padding:5px; vertical-align:top; }
td.updinfo { border-left:1px solid #eee; /* colour of vertical line */ }

.upddate {
    padding-right:10px;
    width:50px;
    color:#222; /* left text colour */
    font-style:italic;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.5px;
}

.updinfo {
    width:100px;
    padding-left:10px;
}

.updinfo:before {
    position:absolute;
    content:'';
    height:9px;
    width:9px;
    border-radius:50%;
    margin-left:-15px;
    margin-top:3px;
    background:#eee; /* colour of circle */
}

.updinfo:hover:before {
    background:#aaa; /* colour of circle on hover */
}

</style>

<!-- update tabs begin -->
<!-- template for new update:
  <tr>
    <td class="upddate">date</td>
    <td class="updinfo">what</td>
  </tr>
-->

<div class="updbox">
<h1 class="updclick">updates</h1> <!-- should match the title style of your theme. you can have anything here eg. fontawesome icon etc. -->
    <div class="updcontent">
    <table>
      <tr>
        <td class="upddate">date</td>
        <td class="updinfo">content</td>
      </tr>
      <tr>
        <td class="upddate">date</td>
        <td class="updinfo">content</td>
      </tr>
      <tr>
        <td class="upddate">date</td>
        <td class="updinfo">content</td>
      </tr>
    </table>
    <!--please don't remove this. if your tabs are  positioned on the right, add float:right behind font-weight:700 -->
    <p><a style="margin-left:5px; font-weight:700;" href="http://enchantedthemes.tumblr.com" title="alydae">©</a>
    </div>
</div>

<!-- end update tabs -->