JQuery Issue: Showing hidden object -

JQuery Issue: Showing hidden object -

i have problem making code right. guess knowledge not plenty sort out asking maybe 1 of kindly prepare code.

so trying achieve: http://jsfiddle.net/yhhfj/

$('[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 alternative = 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 + "<li> <a href='javascript:void(0)' onclick='changesizedropdown(&amp;quot;"+ $j(this).val() +"&amp;quot;);'>" + $j(this).text() + "</a></li>"}); var sizeswatchhtml = "<div class='size'><div style='float: left; margin: 6px 5px 0px 0px;'>select size : </div><div style='float: left; margin: 0pt 7px 0px 13px;'><ul>"+ swatch + " </ul></div></div>"; document.getelementbyid('sizeswatch').innerhtml = sizeswatchhtml; });

i have got select , alternative dropdown s m l sizes managed display separate divs. have got hidden divs (small, medium, large) should displayed when click on s (show small), m (show medium) or l(show large) don't appear , struggling making right.

can please help me guys?

really appreciate help.

i have made minor changes script , seems working fine now.

<script> var $j = jquery.noconflict(); $j('[class^=is]').hide(); $j("#select_2").change(function(){ process(); }); function process() { var value = $j("#select_2 option:selected").val(); var thediv = $j(".is" + value); thediv.slidedown(); thediv.siblings('[class^=is]').slideup(); } function changesizedropdown(size){ var alternative = size; var select = document.getelementbyid("select_2"); var opt, o = 0; while (opt = select[o++]){ if (opt.value == option){select.selectedindex = o - 1; process();} } } $j(document).ready(function () { var swatch =''; $j('#sizebox:eq(0) option').each(function() { swatch = swatch + "<li> <a href='javascript:void(0)' onclick='changesizedropdown(\""+ $j(this).val() +"\");'>" + $j(this).text() + "</a></li>"}); var sizeswatchhtml = "<div class='size'><div style='float: left; margin: 6px 5px 0px 0px;'>select size : </div><div style='float: left; margin: 0pt 7px 0px 13px;'><ul>"+ swatch + " </ul></div></div>"; document.getelementbyid('sizeswatch').innerhtml = sizeswatchhtml; });

first alter have used \" in place of " giving error.

second alter after changing select index of dropdown list, alter event not beingness fired have called explicitly function changesizedropdown itself.

third alter have wrote noconflict statement above , have used $j inplace of $ everywhere.

thanks.

jquery