Как разбить страницу на видимые и невидимые части?

Question

[kalibron]

Суть такая. Надо разбить большую страницу на части, чтобы #content был виден а остальные скрыты и не загружены, а после нажатия на кнопку грузились и появлялись.

Тест код

<div class="content">
	Detektivbyrån Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore
	magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex 
	ea commodo consequat.
</div>



<input type="button" value="Load next" />
<div class="content2">
	Detektivbyrån Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore
	magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex 
	ea commodo consequat.
</div>



<input type="button" value="Load next" />
<div class="content3">
	<img src="img.jpg/>
	Detektivbyrån Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore
	magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex 
	ea commodo consequat.
</div>

Answer 1

[A K]

скрыты

* {
display: none
}
*.active {
display: block
}

Answer 2

[Дмитрий]

jQuery ajax using

Answer 3

[Vlad]

Ну нет такой кнопки: "Сделай мне %work%".
Есть функции загрузки контента через Ajax, есть функции обработки нажатия на кнопку, есть функции показа и скрытия блоков.

Вон я вам сейчас наговнокодю, разбирайтесь.

$("#btn_id").on("click", function() {
    $( "div.content2" ).load( "test.html" );
});

Answer 4

[frees2]

jquery-ui тут в мануале лежит готовое решение, именно такое как и просите
$( "div.content2" ).load