Change content in another div on clicking an li

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 ?

Hi,

Like this?

<div id="first">
    <p>Div One</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>        
    </ul>
</div>

<div id="second">
    <p>Div Two</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>        
    </ul>
</div>

var firstListElements = $("#first ul li"),
    secondListElements = $("#second ul li");

firstListElements.on("click", function(){
    secondListElements.hide();
    var index = firstListElements.index(this),
        el = secondListElements.get(index);
    $(el).show();
});

Demo