Show Hide Google Translator Widget

by kompiajaib

HTML

<div class='translator-widget'>
<div class='translator'>Translate This Blog</div>
<div class='widget-translator'>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'id', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true}, 'google_translate_element');
}
</script>
<script async="async" type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    <div class='close-translator' title='Close'>&#10006;</div>
 </div>
</div>

CSS

.translator-widget{
    position:relative;
    width:180px;
    padding:0;
    margin:0 auto
}
.translator{
    position:absolute;
    top:0;
    left:0;
    text-align:center;
    width:100%;
    height:29px;
    line-height:29px;
    border:1px solid #333;
    background:#555;
    color:#efefef;
    cursor:pointer
}
.translator:hover{
    background:#777
}
.widget-translator{
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:29px;
    border:1px solid #333;
    background:#555;
}
.close-translator{
    position:absolute;
    font-size:12px;
    color:red;
    top:6px;
    right:5px;
    cursor:pointer;
    font-weight:400;
}
#google_translate_element{
    margin:2px 0 0 2px;
}

JavaScript

$(function() {  
    $(".translator").click(function () { 
    $(".widget-translator").fadeIn(); 
});
    $(".close-translator").click(function() {
    $(".widget-translator").fadeOut();
});
 });