menu hide e show com animação

Galera bom dia, estou ainda na luta para aprender Jquery e gostaria de pedir pra vocês um help!!

Preciso fazer esse "menu" seguinte: http://www.bootply.com/XUXYrEbKpm

cada imagem dessa vai mudar o conteúdo que está na lateral, no caso tem esse conteúdo inicial "index" e quando clicar por exemplo na cabeça ira mudar para outra div que estará oculta.

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.stack.imgur.com/M56Bv.jpg&key=e281ac3e722a2b587fa3804b9efcdf25f95fa0b75afc919e8c7d8a750714f657" alt="M56Bv.jpg" />

Já consigo fazer ele trocando, mais não sei como fazer para que quando a pessoa clicar fora em em qualquer outro canto do cenario volte para index.

Alguém poderia me da esse help ai? algum tutorial? alguma dica ou até mesmo se alguém tiver esse script facil poderia posta-lo?

gostaria que quando trocar de div fizesse um fade!

Obrigado.