JQuery Issue: Showing hidden object
<p>I do have a problem with making my code right. I guess my knowledge is not enough to sort it out so I am asking maybe one of you could kindly fix my code.</p>

<p>So what I am trying to achieve: <a href="http://jsfiddle.net/yHHFJ/" rel="nofollow">http://jsfiddle.net/yHHFJ/</a></p>

<pre><code>$('[class^=is]').hide();
$("#select_2").change(function(){          
var value = $("#select_2 option:selected").val();
var theDiv = $(".is" + value);

theDiv.slideDown();
theDiv.siblings('[class^=is]').slideUp();
});

var $j = jQuery.noConflict();
function changesizedropdown(size){
var option = size;
var select = document.getElementById("select_2");
var opt, o = 0;
while (opt = select[o++]){
if (opt.value == option){ select.selectedIndex = o - 1; }
}
}

$j(document).ready(function () {

var swatch ='';
$j('#sizebox:eq(0) option').each(function() {swatch = swatch + "&lt;li&gt; &lt;a    href='javascript:void(0)' onclick='changesizedropdown(&amp;amp;quot;"+ $j(this).val() +"&amp;amp;quot;);'&gt;" + $j(this).text() + "&lt;/a&gt;&lt;/li&gt;"});
var sizeswatchhtml = "&lt;div class='size'&gt;&lt;div style='float: left; margin: 6px 5px 0px 0px;'&gt;SELECT SIZE : &lt;/div&gt;&lt;div style='float: left; margin: 0pt 7px 0px 13px;'&gt;&lt;ul&gt;"+ swatch + " &lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;";
document.getElementById('sizeswatch').innerHTML = sizeswatchhtml;

});
</code></pre>

<p>I have got an select and option dropdown with S M L sizes which I managed to display as separate DIVs. Also I have got hidden DIVs (Small, Medium, Large) which should be displayed when I click on S (show Small), M (show Medium) or L(show Large) but they don't appear and I am struggling  with making it right.</p>

<p>Can you please help me guys?</p>

<p>Really appreciate your help.</p>
