cashtter

eu quero fazer isso com php, só não sei como

ainda não coloquei nada em php, pois eu montei toda a estrutura primeiro, para começar a encaixar o php nos lugares certinhos.... Neste caso, sera nos lugares onde se encontram as divs (as mensagens)... mas isso eu sei fazer, só queria saber como posso usar essas divs como frames, pois quando clicar em por exomplo: Caixa de entrada, ele vai aparecer todas as mensagens da caixa de entrada na: <div class="msgSuporte"> E quando clicar na mensagem, ela vai abrir os detalhes da mensagem na: <div class="viewSuporte">

Bom dia pessoal, preciso de ajuda com o código... Minha intenção é fazer como se fosse o e-mail, quando clicar na "Caixa de Entrada" aparece as mensagens na div do lado, e quando eu clicar na mensagem, ela vai abrir a mensagem na div do lado com os detalhes. Minha dificuldade é fazer das divs como se fossem frames, pois uma só vai aparecer quando clicar em um dos botões. Abaixo vou deixar meu código da página que quero fazer isso. att, e agradeço desde já. <style type="text/css"> /* ----- TABELAS ----- */ .tabelatable2{ position:relative; top:-3px; left:-1px; width:100%; margin-left:auto; margin-right:auto; border-collapse:collapse; z-index:1; } .tabelatable2 thead th { margin-top:-100; background:#124c75; font-size:16px;; text-align:center; padding-top:5px; height:60px; padding-left:30px; } .tabelatable2 th { background:#124c75; font-size:16px;; text-align:center; padding-top:5px; height:60px; padding-left:30px; } .tabelatable2 tr td input{ font-size:14px; background:#fff; text-align:right; padding-top:5px; height:50px; border-right:#BBBBBB solid 1px; border-bottom:#BBBBBB solid 0px; border-top:#BBBBBB solid 0px; padding-right:15px; padding-left:25px; } .tabelatable2 tr td input:hover{ width:100%; border-right:#BBBBBB solid 1px; color:#fff; background:#124c75; opacity:0.6; cursor:pointer; } .over { background: #B7D7F0; } /* ----- TABELAS 3 ----- */ .tabelatable3{ position:relative; top:-38px; width:100%; margin-left:auto; margin-right:auto; border-collapse:collapse; z-index:88; } .tabelatable3 thead th { position:relative; margin-top:-100; background:#1761ac; font-size:16px;; text-align:left; padding-top:5px; padding-bottom:5px; height:20px; padding-left:30px; width:100%; color:#fff; } .over { background: #B7D7F0; } /* ----- TABELAS ----- */ .tabelatable4{ position:relative; top:-10px; width:100%; margin-left:auto; margin-right:auto; border-collapse:collapse; z-index:1; } .tabelatable4 tr td input{ font-size:14px; background:#fff; text-align:left; padding-top:5px; height:50px; border-right:#BBBBBB solid 1px; border-bottom:#BBBBBB solid 0px; border-top:#BBBBBB solid 0px; padding-right:15px; padding-left:25px; } .tabelatable4 tr td input:hover{ width:100%; border-right:#BBBBBB solid 1px; color:#fff; background:#124c75; opacity:0.6; cursor:pointer; } .over { background: #B7D7F0; } /* ----- TABELAS ----- */ .tabelatable5{ position:relative; top:-40px; width:100%; margin-left:auto; margin-right:auto; border-collapse:collapse; z-index:1; } .tabelatable5 thead th { margin-top:-100; background:#ccc; font-size:16px;; text-align:right; padding-top:5px; height:40px; padding-right:30px; } .tabelatable5 tr td { font-size:14px; text-align:left; padding-top:25px; height:20px; border-right:#BBBBBB solid 1px; padding-right:15px; padding-left:45px; } .tabelatable5 tr td img{ height:60px; width:60px; border-radius:100%; } .tabelatable5 tr td strong{ position:relative; top:-30px; } .tabelatable5 tr td .p1{ position:relative; top:-30px; left:65px; font-size:10px; }.mensagem{ position:relative; left:15px; } .over { background: #B7D7F0; } .acoesSuporte{ max-width:300px; position:absolute; margin-top:-32px; margin-left: -21px; } .msgSuporte{ width:200px; position:absolute; margin-top:-32px; margin-left: 124px; } .cabecalho{ margin-left:-21px; padding:0px; } .viewSuporte{ position: relative; margin-top:0px; margin-left: 314px; padding-left:10px; } </style> <div class="cabecalho"> <table class="tabelaTable3" border="0"> <tr> <thead> <th>Suporte</th> </thead> </tr> </table> </div> <div class="acoesSuporte"> <table class="tabelaTable2" border="0"> <tr> <td><a href=""><input class="tabelatable2" name="" type="button" value="Caixa de Entrada"></a></td> </tr> <tr> <td><a href=""><input class="tabelatable2" name="" type="button" value="Caixa de Saida"></a></td> </tr> <tr> <td><a href=""><input class="tabelatable2" name="" type="button" value="Não Lidos"></a></td> </tr> <tr> <td><a href=""><input class="tabelatable2" name="" type="button" value="Lixo"></a></td> </tr> </table> </div> <div class="msgSuporte"> <table class="tabelaTable4" border="0"> <tr> <td><a href=""><input class="tabelatable4" name="" type="button" value="Mensagem 1"></a></td> </tr> <tr> <td><a href=""><input class="tabelatable4" name="" type="button" value="Mensagem 2"></a></td> </tr> <tr> <td><a href=""><input class="tabelatable4" name="" type="button" value="Mensagem 3"></a></td> </tr> </table> </div> <div class="viewSuporte"> <form action="" method="post"> <table class="tabelaTable5" border="0"> <tr> <thead> <th>Lixo</th> </thead> </tr> <tr> <td> <img src="css/img/user.png"> <strong>E-Mail: emaildoremetente@hotmail.com</strong> <p class="p1">Enviado dia 25/11/2015 às 00:57</p> </td> </tr> <tr> <td>&nbsp;&nbsp;&nbsp;<b>Asuunto da mensagem</b></td> </tr> <tr> <td class="mensagem">Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.Mensagem: Toda a mensagem do suporte.</td> </tr> </table> </form> </div>