Modified version
Switch Display Options WITH CSS & JQUERY to basic.
place the following inside body tag
<a href="#" class="switch_thumb">Switch Thumb</a>
<div class="custom-gen">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
And paste the following in the head tag
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a.switch_thumb").toggle(function(){
$(this).addClass("swap");
$("div.custom-gen").fadeOut("fast", function() {
$(this).fadeIn("fast").addClass("inline-list");
});
}, function () {
$(this).removeClass("swap");
$("div.custom-gen").fadeOut("fast", function() {
$(this).fadeIn("fast").removeClass("inline-list");
});
});
});
</script>
/* setting background color to blackto see the rounded corner of the the switch view image */
body{
background-color:#000000;
color:white;
}
ul {
list-style: none;
}
.custom-gen ul li:before {
content: "\00BB \0020";
}
.inline-list {
border: 1px solid #000;
margin: 2em;
padding: 5px;
}
.inline-list p {
display: inline;
}
.inline-list ul, .inline-list li {
display: inline;
margin: 0;
padding: 0;
}
/* Switch View image CSS */
a.switch_thumb {
width: 122px;
height: 26px;
line-height: 26px;
padding: 0;
margin: 10px 0;
display: block;
background: url(switch.gif) no-repeat;
outline: none;
text-indent: -9999px;
}
a:hover.switch_thumb {
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
a.swap { background-position: left bottom; }
