Como abrir div abaixo de LI (esquema do google imagens)

[Modugno 4]

Bom dia galera, alguém sabe como consigo chamar uma div abaixo de uma lista de li (na qual todas pertence a mesma UL) , parecido com o esquema do google images, onde tem varias imagens (no caso sera livro) e ao ser clicado, ira abrir uma div abaixo com as páginas do mesmo. Fiz um esquema aqui no PS para ilustrar melhor a ideia.

Obs. Eu consigo chamar uma div abaixo a UL. Mas se no caso tiver duas linhas de li como na imagem, ele abre so la embaixo (abaixo de todas li) mesmo que a li clicada, esteja na linha de cima. Não queria que fosse dessa forma... e sim como na imagem... alguem sabe como resolver isso?

desde ja, valeu galera :D

[William Bruno 1501]

Exemplo:

 

http://wbruno.com.br/javascript-puro/album-de-fotos-javascript-simples-aplicacao-de-esconde-mostra/

[Modugno 4]

Sim Wiliam Bruno, porem no caso tem 3 elementos na sua galeria, se no caso existisse 4 ou mais, fazendo com que as demais <li> fossem para a linha de baixo, ao ser clicado, ele iria abrir a div abaixo da clicada? ou abaixo de todas as <li> ?

 

bom, esse é o projeto no qual estou trabalhando ainda, para você ter uma ideia, ao clicar em qualquer livro, percebera que carrega abaixo da <ul> e não abaixo da li.

 

de uma olhada...

www.webersonsantiago.com

[William Bruno 1501]

Ai é puro css. Basta estilizar.

 

O efeito js, é bem simples.

[Modugno 4]

Sim, saberia me dizer alguma forma de quebrar as linhas dos <li> com css? por que se não terei que colocar um carousel, e não é bem o que eu queria =s