JSFiddle - React, Tailwind, and code Playground

by Margus Martsepp

HTML

<div id="toggle-lexicon">
    <div id="toggle-lexicon-persons" class="lexicon-description"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Crystal_Clear_app_download_manager.png/48px-Crystal_Clear_app_download_manager.png" class="toggle-lexicon-img"> option 1</div>
    <div id="toggle-lexicon-businesses" class="lexicon-description selected"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Crystal_Clear_Password.png/48px-Crystal_Clear_Password.png" class="toggle-lexicon-img"> option 2</div>
</div>

CSS

.lexicon-description {
        cursor: pointer;
        color: darkgray;
    }
    .selected {
        color: black;
        background-color: #FFF;
		border-right: 1px solid #660000;
        border-left: 1px solid #660000;
        border-top: 1px solid #660000;
        border-bottom: 1px solid #ffffff;
    }
    #toggle-lexicon {
        padding-top: 0.2em;
        padding-bottom: 0px;
        width:280px;
		*width:278px;
		height: 61px;
		border-bottom: 1px solid #660000;
    }
    #toggle-lexicon div {
		float:left;
	    padding-top: 8px;
        *padding-top: 4px;
        padding-right: 6px;
    }

JavaScript

$('#toggle-lexicon > div').click(function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    var ix = $(this).index();
    
    if(ix === 0){
        $('#find-search-lexicon-persons').val($('#find-search-lexicon-businesses').val());
    } else {
        $('#find-search-lexicon-businesses').val($('#find-search-lexicon-persons').val());
    }
    
    $('#infoDivPersons').toggle(ix === 0);
    $('#infoDivBusinesses').toggle(ix === 1);
});