Show/Hide Box on Click In Input - Working

Show/Hide Box on Click In Input - Working

by Nirvanachain

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

body  { overflow-x: hidden; }

.container { position: relative; }

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

JavaScript

$('.js-input').click(function(event) {
    $('.toggleBox').css({
        top : 22 + 'px',
        left : 91 + 'px'
    });
    event.stopPropagation();
});

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

$(document).click(function() {
    $('.toggleBox').hide();
});