Change content in other div on click

[Jaswinder]

Hello friends,

 

I am trying to achieve a simple thing, but I do not know jquery/javascript  much. When I click on a forst list item in one div , I want to show corresponding 1st li in the second div. I have 6 list items in total and related 6 li in second div.

 

Also when I click on any list item in first div, it will be borderd, this I achieved. But I am not able to bring the related li in the second div.

 

Hope I make myself clear.

 

Here is my code

<style>
.selected img
{
    border:2px solid #090;
}
.visible
{
display:block;
}

.invisible
{
display:none;
}
</style>

<div id="all">
<ul>
<li class="selected"><img src="image1.JPG" /></li>
<li><img src="image2.JPG" /><br /></li>
<li><img src="image3.JPG" /><br /></li>
</ul>
</div>   

<div class="container">
<ul>
<li class="visible"><img src="related_image1.JPG" /></li> (In these list items there may be img or content)
<li class="invisible"><img src="related_image2.JPG" /></li>
<li class="invisible"><img src="related_image3.JPG" /></li>
</ul>
</div>

<script type="text/javascript">

    $('#all ul li').on('click', function(){
    
	$(this).addClass('selected').siblings().removeClass('selected');
	
	$('.container ul li:nth-child(1)').fadeout(); // Don't know this line is correct or not
	
	
});
</script>

Any help guys ?

[cyberRobot]

You could use the index of the <li> tag that was clicked to determine which image to show in the second list. Here's a quick example:

<script type="text/javascript">
$('#all ul li').on('click', function(){
     $(this).addClass('selected').siblings().removeClass('selected');
 
     var selectedIndex = $(this).index() + 1;  //index() starts with 0, but nth-child starts with 1...that's the purpose behind adding 1
 
     $('.container ul li').removeClass('visible invisible');
     $('.container ul li:nth-child(' + selectedIndex + ')').addClass('visible');
     $('.container ul li:nth-child(' + selectedIndex + ')').siblings().addClass('invisible');
});
</script>