JSFiddle - React, Tailwind, and code Playground

by Amid Akhmed

HTML

<div class="infoblock" id="menu">
    <ul>
        <a onclick="_click(1); return false;" class='item' href="#">?</a>
    </ul>
</div>
<div style=" display:none" id="item1" class='priseinfo'>Информация</div>

CSS

.infoblock{
width: 13px;
height: 13px;
line-height: 13px;
}
.item{
position: relative;
top: -0.3em;
border-radius: 50%;
margin: 0px 4px 0px 0px;
color: #555;
border: medium solid #B2B2B2;
display: inline-block;
text-align: center;
text-decoration: none;
background: none repeat scroll 0% 0% #FFF;   
}

JavaScript

var _click = function () {
    var b = 1;
    return function (c) {
        var a = document.getElementById("item" + b);
        c == b && (a.style.display = "none" == a.style.display ? "" : "none");
        c != b && (a.style.display = "none", a = document.getElementById("item" + c), a.style.display = "", b = c)
    }
}();

document.onclick=function (event) {

    var target = event.target || event.srcElement;
    if (target.className=='item') {
        return;
    };
    if (target.className!='priseinfo') {
        var o=document.querySelectorAll('.priseinfo');
        for (var i=0; i<o.length; i++) {
            o[i].style.display = "none";
        };

    };
}