JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<ul id="list">
    <li>1 apple</li>
    <li>2 apple</li>
    <li>3 apple</li>
    <li>4 apple</li>
    <li>5 apple</li>
</ul>
<div id="images">
    <img src="http://s2.hubimg.com/u/12232321_50.jpg" />
    <img src="http://2020produce.com/wp-content/uploads/2013/05/apple-variety_braeburn.jpg" />
    <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash2/v/t1.0-1/p50x50/1010277_373015446133133_70689404_n.png?oh=a88a06a73f9b5b2af322293d4e6a0d28&oe=55751B93&__gda__=1438103745_c4c1531ef8826ebd3a3f2fb659953773" />
    <img src="http://www.digminecraft.com/food_recipes/images/golden_apple.png" />
    <img src="http://theipadforkids.com/wp-content/themes/agency/themify/img.php?src=http://theipadforkids.com/wp-content/uploads/2013/11/apple-logo1.png&w=50&h=50&zc=1" />
</div>

CSS

img {
    display:none;
}
li {
    margin: 10px 0;
    cursor: pointer;
    background-color:orange;
    padding: 5px;
    max-width:100px;
}

JavaScript

function initListToImageBind(defaultIndex) {
    var lastShown;
    if (!isNaN(defaultIndex)) {
        lastShown = $('#images img:eq(' + defaultIndex + ')').show();
    }

    $('#list').on('click', 'li', function () {
        var index = $(this).index();
        if (lastShown) lastShown.hide();
        lastShown = $('#images img:eq(' + index + ')')
        lastShown.show();
    });
}


initListToImageBind(4);