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

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

/applications/core/interface/imageproxy/imageproxy.php?img=https://scontent-b-atl.xx.fbcdn.net/hphotos-xfp1/t1.0-9/10356315_905574712792158_2962263274218125524_n.jpg&key=30ba259504dee94d66e5268bae287d2fc589d6f5a3164d900bcbf3115056ba7f" alt="10356315_905574712792158_296226327421812" />