JSFiddle - React, Tailwind, and code Playground

by Jader Wagner

HTML

<div id="banners">
    <img src="http://png-5.findicons.com/files/icons/2718/pretty_office_icon_set_part_11/128/number_1.png">
    <img src="http://png-3.findicons.com/files/icons/2718/pretty_office_icon_set_part_11/128/number_2.png">
    <img src="http://png-4.findicons.com/files/icons/2718/pretty_office_icon_set_part_11/128/number_3.png">
    <div>[1] Bla bla bla</div>
    <div>[2] Bla bla bla</div>
    <div>[3] Bla bla bla</div>
    <hr>
    <button>Banner 1</button>
    <button>Banner 2</button>
    <button>Banner 3</button>
</div>

JavaScript

$(document).ready(function () {
    $('#banners img:not(:eq(0)), #banners div:not(:eq(0))').each(function() { $(this).hide(); });

    $("button").click(function () {
        $('#banners img, #banners div').hide();
        $('#banners img:eq(' + $(this).index('button') + '), #banners div:eq(' + $(this).index('button') + ')').show();
    });
});