rogo rogo - 4 months ago 16
HTML Question

Display a Div onClick in Javascript

I want to Show div onClick and Hide this div on click anywhere.



window.addEvent('load', function() {
$$('a.tooltip').each(function(link) {
var tooltip = document.id(link.id + '_tooltip'),
callback = function(e) {
if( tooltip.style.display === 'block' ) {
tooltip.style.display = 'none';
document.removeEvent('click', callback);
} else {
tooltip.style.display = 'block';
document.addEvent('click', callback);
}
e.stop();
};
link.addEvent('click', callback);
});
});

<a class="tooltip" id="link1" href="#">Show</a>
<div style="display:none" id="link1_tooltip">Tap anywhere to kylym</div>





I found this Error:


"message": "Uncaught TypeError: window.addEvent is not a function",


I don't know how to fix it. Someone can help me?

Answer

Here is how to do it :)

HTML:

<a class="tooltip" id="link1" href="#">Show</a>
<div style="display:none" id="link1_tooltip">Tap anywhere to kylym</div>

JS:

$('.tooltip').click(function(){
$('#link1_tooltip').show();
});
$(document).mouseup(function (e)
{
    var container = $('#link1_tooltip');

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

Here is a fiddle : https://jsfiddle.net/sctvo1fq/

If not already you should import jquery in yours site head like this :

<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
Comments