show hide divs under foreach - html

Question

I have this code :
{foreach from=$aProfiles item=aModules}
{foreach from=$aModules key=sPrivacy item=aProfile}
<div class="table">
<div class="table_left">{$aProfile.phrase}</div>
<div class="table_right">contents ...........</div>
</div>
{/foreach}
{/foreach}
This will generate many divs for div class="table" that content div class="table_left" and
div class="table_right" .....
What I want is :
div class="table_right" to be hidden (disply:none) ,
click on div class="table" will show it . Then if click on another div class="table" will hide the opening div and show class="table_right" were clicked .
i succes to do this but was showing the first one of all the divs group .
to understand what i mean exactly please see the facebook account sitings , wen click on name show the
name informations then if click on username hide name's informations and show username informations .
Sorry if my english is poor.
Thank you very much.

Answer 1

Use Jquery to get it ...
Create a .hidden class with style display: none;
then use jquery click function to add remove class ..
in loop add hidden class with table_right
.hidden{
display: none;
}
<script>
$(function(){
$(".table").click(function(){
$('.table_right').addClass('hidden');
$(this).children('.table_right').removeClass('hidden');
});
});
</script>
and the forech like below ...
{foreach from=$aProfiles item=aModules}
{foreach from=$aModules key=sPrivacy item=aProfile}
<div class="table">
<div class="table_left">{$aProfile.phrase}</div>
<div class="table_right hidden">contents ...........</div>
</div>
{/foreach}
{/foreach}