Donasi dengan toggle jquery

by kompiajaib

HTML

<div class="paypalbox">
<span class="paypalheader">Donasi</span>
<div class="tombolpaypal">
    <p>Secangkir kopi selalu menemani saya membuat tutorial. Donasi Anda bisa membantu saya menyediakannya.<br/>
        Terima kasih.</p>
    <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=2RDHCU736ZPXJ" title="Donasi via Paypal" target="_blank">
    <span class="paypal">Donasi via Paypal</span></a>
</div>
    </div>

CSS

.paypalbox{
    position:relative;
    width:250px;
    height:auto;
    position:fixed;
    bottom:0;
    left:60px;
}
.tombolpaypal{
    text-align:center;
    text-decoration:none;
    width:240px;
    height:auto;
    background:#555;
    padding:5px 5px 15px;
    display:none;
}
.paypal{
    background:#efefef;
    border:0;
    margin:0 auto;
    padding:5px 18px;
    font-size:18px;
    font-weight:700;
    color:#333;
    text-align:center;
    display:inline-block;
    border-radius:3px;
}
.paypal:hover{
    background:#ddd;
}
.paypalheader{
    background:#222;
    border-radius:3px 3px 0 0;
    margin:0 auto;
    padding:8px 23px;
    font-size:18px;
    font-weight:700;
    color:#fff;
    text-align:center;
    display:block;
    cursor:pointer;
}
.tombolpaypal a{
    text-decoration:none;
}
.tombolpaypal p{
    color:#ddd;
    font-size:14px;
    margin:5px 0 10px;
}

JavaScript

jQuery(document).ready(function($) {
    $(".paypalheader").click(function() {
        $(".tombolpaypal").slideToggle(500);
    });
});