JSFiddle - React, Tailwind, and code Playground

by lparcerisa

HTML

<div class="pure-u-17-24">
    <p class="tituloGrupo">Grupo</p>
    <img data-id="0" src="assets/images/front/grupo/grupo-bignardi-2.png" alt="Grupo Bignardi - Soluções em Papel" class="pure-img imagensSelecionaveis"/>  
    <img data-id="1" src="assets/images/front/grupo/bignardi-papeis.png" alt="Bignardi Papéis" class="pure-img imagensSelecionaveis"/>
    <img data-id="2" src="assets/images/front/grupo/jandaia.png" alt="Jandaia" class="pure-img imagensSelecionaveis"/>
    <img data-id="3" src="assets/images/front/grupo/jandaia-atacado.png" alt="Jandaia - Atacado em Papelaria" class="pure-img imagensSelecionaveis"/>

            <div  id="content0" class="pure-g show">
                <div class="pure-u-17-24 textoEmpresa">
                    texto Valor 0
                </div>
                <div class="pure-u-7-24">
                    <img src="assets/images/grupo/{{$grupo->imagem}}" alt="image0" class="imagemEmpresa pure-img"/>
                </div>
            </div>

                <div id="content1" class="pure-g hide">
                    <div class="pure-u-17-24 textoEmpresa">
                       texto Valor 1
                    </div>
                    <div class="pure-u-7-24">
                        <img src="assets/images/grupo/{{$grupo->imagem}}" alt="image1" class="imagemEmpresa pure-img"/>
                    </div>
                </div>
				
                <div id="content2" class="pure-g hide">
                    <div class="pure-u-17-24 textoEmpresa">
                       texto Valor 2
                    </div>
                    <div class="pure-u-7-24">
                        <img src="assets/images/grupo/{{$grupo->imagem}}" alt="image2" class="imagemEmpresa pure-img"/>
                    </div>
                </div>
    </div>

CSS

.hide{
    display:none;
}
.show{
    display:block;
}
.imagemEmpresa{
    float:right;
}

img {
    border:1px solid grey;
    padding:5px;
}

JavaScript

$(function() {
    $('.imagensSelecionaveis').click(function(){
        var id = $(this).data("id");
        $('.pure-g').hide();
        $('#content'+id).show();
    });
});