Search the Community
Showing results for tags 'click event'.
Found 1 result
-
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 ?
