issue when remove display:none with JQuery

Question

I am using Jquery buttons set, which is built into Jquery UI. And selectmenu which is a ui addon.

.buttonset(); takes a group of buttons and makes thhem into radio buttons .selectmenu(); takes a select menu and truns it into a nice looking popup list.

However when I place these items in a div with the property display:none and then in my javascript code I remove the display:none the buttonset does not have it's rounded corners, and the select menu shows up about 2 px wide, although I can still click on those two pixels to open the menu.

Any ideas? I'll post my code:

.hidden
{
    display:none;
}


        $("#test").selectmenu();
        $("#radioset").buttonset();

<div id="mydisplay" class="hidden">
    <div id="radioset">
                        <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1testetstes</label>
                        <br /><input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
                        <br /><input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
                    </div>
    <select name="test" id="test">
            <option value="slow">Test1</option>
            <option value="test2">Test2</option>
            <option value="test3">Test3</option>
            </select>
</div>

And at some point I call this:

$("#mydisplay").removeClass("hidden");

But the objects do not display properly... can I force them to re-render or something?

Answer 1

Rather than removing a class that sets the elements' display to none, use display: block; in the css for the .hidden class. And then use $('.hidden').hide() along with $('.hidden').show() to hide and show the whole thing.

Like so:

$(document).ready(function(){
    $('.hidden').hide();
    $('.someButtonThatShowsStuff').click(function(){
        $('.hidden').show();
        $("#test").selectmenu();
        $("#radioset").buttonset();
    });
});

EDIT: Modified the code to apply the visual plugins after showing the elements.