Widget Social Slide Down Sidebar

by kompiajaib

HTML

<div id='socialdown'>
<ul>
   <li class='has-sub'><a href='#' title='We Are On Facebook'><span>We Are On Facebook</span></a>
      <ul>
         <li>
<span class="fb-like-box" data-href="https://www.facebook.com/kompiajaib" data-width="300" data-height="240" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></span></li>
 </ul>
   </li>
   <li class='has-sub'><a href='#' title='Google+ Followers'><span>Google+ Followers</span></a>
      <ul>
         <li style="padding-top:10px;padding-left:22px"><span class="g-plus" data-action="followers" data-height="200" data-href="https://plus.google.com/+AdhySuryadi" data-source="blogger:blog:followers" data-width="300">  </span>
</li>
      </ul>
   </li>
   <li class='has-sub'><a href='#' title='Subscribe This Blog'><span>Subscribe This Blog</span></a>
       <ul>
         <li style="padding:15px;font-size:11px;text-align:left;line-height:1.4em;"><span>Enter your email address to get the latest update from Kompi Ajaib on box below</span>
<form style="padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=KompiAjaib', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="enteryouremail" name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email....&quot;;}' onfocus='if (this.value == &quot;Enter your email....&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/>
<input type="hidden" value="KompiAjaib" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input class="submitbutton" type="submit" value="Subscribe" /></form>
</li>
      </ul>
       </li>
</ul>
</div>

CSS

#socialdown,
#socialdown ul,
#socialdown li,
#socialdown a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  position: relative;
}
#socialdown a {
  line-height: 1.7;
  padding: 6px 15px;
}
#socialdown {
  width: 300px;
}

#socialdown > ul > li > a {
  font-size: 18px;
  display: block;
  color: #ffffff;
  text-shadow: 0 1px 1px #000;
  background:  #499bea;
  background: linear-gradient(to bottom, #499bea 0%, #207ce5 100%);
}
#socialdown > ul > li > a:hover {
  text-decoration: none;
}
#socialdown > ul > li.active {
  border-bottom: none;
}
#socialdown > ul > li.active > a {
  background: #b3dced;
  background:linear-gradient(to bottom, #b3dced 0%, #2fc4fa 100%);
  color: #555;
  text-shadow: 0 1px 1px #b3dced;
}
#socialdown > ul > li.has-sub > a:after {
  content: '';
  position: absolute;
  top: 15px;
  right: 10px;
  border: 5px solid transparent;
  border-left: 5px solid #ffffff;
}
#socialdown > ul > li.has-sub.active > a:after {
  right: 14px;
  top: 17px;
  border: 5px solid transparent;
  border-top: 5px solid #555;
}
#socialdown ul ul {
  padding: 0;
  display: none;
}
#socialdown ul ul a {
  background: #efefef;
  display: block;
  color: #797979;
  font-size: 13px;
}
#socialdown ul ul li {
  background: #efefef;
  border-bottom: 1px solid #c9c9c9;
}
#socialdown ul ul li:last-child {
  border: none;
}
.submitbutton {
    background: #FF8000;
    border: 1px solid #F66303;    
    font: bold 12px Arial, sans-serif;
    color: #fff;height: 25px;    
    padding: 0 8px;margin: 0 0 0 5px;
    cursor: pointer;
}
.enteryouremail {
    background: #fff !important;
    border: 1px solid #d2d2d2;
    padding: 0px 8px 0px 8px;
    color: #a19999;
    font-size: 12px;    
    height: 25px;
    width: 162px;
    margin: 0px;  
}
.enteryouremail:focus{
    outline:none
}

JavaScript

$('#socialdown > ul > li > a').click(function() {
  $('#socialdown li').removeClass('active');
  $(this).closest('li').addClass('active');	
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#socialdown ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;	
  }		
});

        (function() {          window.___gcfg = {'lang': 'en'};          var po = document.createElement('script');          po.type = 'text/javascript';          po.async = true;          po.src = 'https://apis.google.com/js/plusone.js';          var s = document.getElementsByTagName('script')[0];          s.parentNode.insertBefore(po, s);        })();      

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));