peace - updates

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){

$('div.dropdown').each(function() {
var $dropdown = $(this);

$("div.drl", $dropdown).click(function(e) {
e.preventDefault();
$div = $("div.drc", $dropdown);
$div.slideToggle(1000);
$("div.drc").not($div).slideUp(500);
return false;
});
});

$('html').click(function(){
$("div.drc").slideUp(500);
});
});
</script>

#uptxt {
    font-size: 10px;
    font-family:'Gibson', sans-serif;
    position:fixed;
    font-size:10px;
    left:2px; /*change 'left' to 'right' to align to right side */
    top:55px;
    color:#20b2aa; /*change the color of the 'updates' word */
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

.drlpos {
    position:fixed;
    left:15px; /*change 'left' to 'right' to align to right side */
    top:85px;} /*change the links position from the top of the screen*/

.drl {
    font-size: 10px;
    font-family:'Gibson', sans-serif;
    display:block;
    text-align:left;
    margin-top:8px;}

.drl a {
    text-decoration: none;
    margin-top:8px;
    display:block;
    color:#000;} /*change the numbered links color */

.drl a:hover {
    color:#20b2aa; /*change the numbered links hover color */
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;}

.drc {
    font-size: 10px;
    font-family:'Gibson', sans-serif;
    padding:15px;
    background:#ddd; /*change the update tabs background color */
    line-height:150%;
    text-align:justify;
    width:200px; /*change the width of your tabs here */
    color:#000; /*change the update tabs text color */
    position:fixed;
    top:40px; /*change the position of the update tabs box from the top of the screen */
    left:40px;} /*change the position of the update tabs box from the left of the screen - change 'left' to 'right' if you want right aligned tabs*/

.drctitle {
    font-size: 10px;
    font-family:'Gibson', sans-serif;
    text-transform:uppercase;
    padding:2px;
    text-align:center;
    background:#fff; /*change the color of the title background */
    margin-bottom:5px;}

<!-- updates tab by octomoosey.tumblr.com -- please don't delete this line - thanks!!! -->

<div id="uptxt">UPDATES</div>

<div class="drlpos">

<!-- start of tab 1 -->

<div id="dropdown-1" class="dropdown">
<div class="drl"><a href="#">.01</a></div>
<div class="drc" style="display: none;">
<div class="drctitle">here's title one</div> <!-- change the box title text here -->

<!-- this is where your tab content goes - the tab will automatically resize to fit your content!  use any html you like here -->

You must understand the whole of life, not just one little part of it. That is why you must read, that is why you must look at the skies, that is why you must sing, and dance, and write poems, and suffer, and understand, for all that is life.

</div>
</div>

<!-- end of tab 1 -->

<div id="dropdown-2" class="dropdown">
<div class="drl"><a href="#">.02</a></div>
<div class="drc" style="display: none;">
<div class="drctitle">here's title two</div>
Mama told me that there
was someone up above watching
over us; a guardian angel
for everyone who’ll show us
the way through during the
dark times and give us gifts
during the good ones.
</div>
</div>

<div id="dropdown-3" class="dropdown">
<div class="drl"><a href="#">.03</a></div>
<div class="drc" style="display: none;">
<div class="drctitle">here's title three</div>
As I got older I became
less sure that we had
guardian angels of a divine
origin looking out for us
but maybe our guardian angel
was just an ordinary
human being like you and I,
and that maybe the change
to this world will,
by necessity, start with us.

</div>
</div>

<div id="dropdown-4" class="dropdown">
<div class="drl"><a href="#">.04</a></div>
<div class="drc" style="display: none;">
<div class="drctitle">here's title four</div>
And maybe this isn’t a
bad thing; maybe there’s
a special kind of divinity
in this that the supernatural
simply can’t provide;
another form of divine
written just for humans,
which manifests itself in the
small acts of kindness we
bestow upon each other.
</div>
</div>

<div id="dropdown-5" class="dropdown">
<div class="drl"><a href="#">.05</a></div>
<div class="drc" style="display: none;">
<div class="drctitle">here's title five</div>
After all, why would
an angel be a human’s guardian?
Oh yes, they love us,
because they must,
but oh do they hate us—
God created them first and
gave them powers beyond
our wildest imagination,
but it was us that
were given the power of choice,
the humble power of free will,
and for that the angels
must surely despise us.
</div>
</div>

</div>
</div>