JSFiddle - React, Tailwind, and code Playground

by Margus Martsepp

HTML

<div class="box">
    <div class="topbox-lexicon" xmlns:albertext="urn:albertExt">
        <div class="headerbox">Leksikon</div>

        <div class="input-group-lexicon-parent">
            <p class="toggle-lexicon">
                <span class="description selected">
                    <span class="btn-lexicon">
                        <img class="search-group-lexicon" src="http://nugakala.aripaev.ee:8983/solr/veeb/ver8/img/personBig.png">
                    </span>
                    <span class="text-lexicon">isikud</span>
                </span>
                <span class="description">
                    <span class="btn-lexicon">
                        <img class="search-group-lexicon" src="http://nugakala.aripaev.ee:8983/solr/veeb/ver8/img/businessBig.png">
                    </span>
                    <span class="text-lexicon">ettevõtted</span>
                </span>
            </p>
            <div id="infoDivPersons" class="input-group-lexicon">
                <input id="find-person-search" type="text" class="find-lexicon" placeholder="Otsi isikuid">
                <div class="btn-lexicon">
                    <img class="searchButtonDiv" src="http://nugakala.aripaev.ee:8983/solr/veeb/ver8/img/searchButton.gif">
                </div>
            </div>
            <div id="infoDivBusinesses" class="input-group-lexicon" style="display:none">
                <input id="find-business-search" type="text" class="find-lexicon" placeholder="Otsi ettevõtteid">
                <div class="btn-lexicon">
                    <img class="searchButtonDiv" src="http://nugakala.aripaev.ee:8983/solr/veeb/ver8/img/searchButton.gif">
                </div>
            </div>
        </div>

        <div id="pageHeader">
            <a id="logoContainer" href="http://infopank.aripaev.ee" target="_blank">
                <div>
                    <img id="logo-lexicon" src="http://nugakala.aripaev.ee:8983/solr/veeb/ver8/img/Aripaev_Infopank_logo_mv.jpg"...

CSS

.box {
    position: relative;
    float: left;
    background-color: rgb(255, 255, 255);
    border-bottom-color: rgb(7, 144, 52);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-collapse: collapse;
    border-left-color: rgb(7, 144, 52);
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: rgb(7, 144, 52);
    border-right-style: solid;
    border-right-width: 1px;

    display: block;
    font-family: Arial;
    font-size: 12px;
    height: 212px;
    margin-bottom: 15px;
    margin-left: 0px;
    margin-right: 6px;
    margin-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    width: 176px;
}
#pageHeader {
    background-color: rgb(178, 4, 41);
    box-sizing: border-box;
    color: rgb(34, 34, 34);
    cursor: default;
    display: block;
    height: 40px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    width: 100%;
}

.topbox {
    border-collapse: collapse;
    display: block;
    font-family: Arial;
    font-size: 12px;
    height: 212px;
    width: 176px;
}

.headerbox {
    background-color: rgb(7, 144, 52);
    border-collapse: collapse;
    color: rgb(255, 255, 255);
    display: block;
    font-family: GuardianSansBold, Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    height: 15px;
    padding-bottom: 5px;
    padding-left: 9px;
    padding-right: 0px;
    padding-top: 5px;
    text-transform: uppercase;
    width: 167px;
}

.leksikon {
    width:171px;
    height:183px;
}

#logo-lexicon {
    float: right;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    width: 55px;
    padding-right: 6px;
}
#headline-lexicon {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: auto;
    direction: ltr;
    display: block;
    float: left
    font-family: 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
    font-size: 11px;
   ...

JavaScript

$('.toggle-lexicon > span').click(function() {
    var ix = $(this).index();
    
    $('#infoDivPersons').toggle( ix === 0 );
    $('#infoDivBusinesses').toggle( ix === 1 );
});

$('#find-person-search').keydown(function (e){
    if(e.keyCode == 13){
        window.open("http://nugakala.aripaev.ee:8983/solr/veeb/ver8/search.html?find="+$('#find-person-search').val(), '_blank');
    }
})
$('#find-business-search').keydown(function (e){
    if(e.keyCode == 13){
        window.open("http://nugakala.aripaev.ee:8983/solr/veeb/ver8/search.html?find="+$('#find-business-search').val(), '_blank');
    }
})