Show/Hide Box on click in inputa

Show/Hide Box on click in inputa

by Ken Z

HTML

<div class="container">
    <label for="myInput">Click in input</label>
    <input type="text" class="js-input" id="myInput" />
    <div class="toggleBox">Some information</div>
</div>

CSS

.container {
    position: relative;
}
.toggleBox {
    position: absolute;
    top: -99999px;
    left: 99999px;
    padding: 15px;
    ;
    border: 1px solid black;
}

JavaScript

$('html').click(function () {
    $('.toggleBox').toggle().css({
        top: 22 + 'px',
        left: 91 + 'px'
    });
});

$('.toggleBox').click(function (event) {
    event.stopPropagation();
});