Первоначальное скрытие div для последующего отображения

Моя веб-страница выглядит следующим образом:

<div id="id1" class="stuff">
TEXT, FORMS, and STUFF
</div>

<div id="id2" class="stuff" style="display:none">
TEXT, FORMS, and STUFF
</div>

<div id="id3" class="stuff" style="display:none">
TEXT, FORMS, and STUFF
</div>

<a id="btn1">DD</a>
<a id="btn2">DD</a>
<a id="btn3">DD</a>

При этом у меня есть события щелчка jQuery, которые устанавливают отображение элемента, по которому щелкнули, для наследования, а остальные - нет.

$("#btn2").click(function (e) {
    $("#id1").css('display','none');
    $("#id3").css('display','none');
    $("#id2").css('display','inherit');
});

Отображение и скрытие работает правильно, однако я заметил, что некоторые элементы в изначально скрытых элементах div отображаются неправильно, особенно элементы, которыми манипулирует CSS. По сути, когда страница загружается, скрытые элементы div не отображаются правильно, а когда они отображаются, все выглядит уродливо. Как правильно это сделать?

РЕДАКТИРОВАТЬ::::::::::::::::::::::::::::::::::::::::::::::

В итоге я установил для всех изначально скрытых div значение «visibility :none»,затем на страницах события onLoad ()установка отображения :none. Когда я переключаюсь, я меняю как видимость, так и отображение. Все отображается правильно, и поскольку все статически настроено на невидимость, нет уродливых 2 секунд, когда отображаются все элементы div.