Select Language Slider

by will525

HTML

<div class="test">
        <p>hello</p>
    
   <span><img class="flag" src="http://www.theflagshop.co.uk/ekmps/shops/speed/images/england-st-george-cross-flag-3ft-x-2ft-851-p.gif" width="40px" height= "30px"></span>

</div>

CSS

.test ul {
    background-image: url('http://1.bp.blogspot.com/_UdH8rcs3s1Q/TGdcNtKNxOI/AAAAAAAAAKM/-jvA0rVt9_E/s320/iPadBackgroundTexture-brown.png');
    width: 60px;
    height: 220px;
    padding: 10px 30px 0 30px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    display:none;    
}

.test a {
    font-size: 12px;
    color: #fff;
    text-decoration: none;    
}

.test a:hover {
    margin-left: 2px;
    font-size: 16px;    
}

span {
    color:#000; 
    cursor:pointer; 
    float: left;
    margin-left: 30px;
}

span:hover {
opacity:0.4;
filter:alpha(opacity=40);
}

.inner {
background-color:red;
}

JavaScript

$(".flag").click(function () {
    $("div.test ul").slideToggle();
 });

 $(".test a").click(function (e) {
    e.preventDefault();
    $("div.test ul").slideToggle();
    $(".flag").attr('src',$(this).data("flagsource"));
 });