Hey!

 

I have created some code, so when I click on an image with the id="preview1" a div with the id="preview1info" will appear, now that would according to plan.

 

But where I am struggling is how would I get the 'preview1info' div to disappear when clicked on?

 

here's the code -

 

<img src="images/preview.png" alt="preview image" id="preview1">
<div id="preview1info">
</div>
<script type="text/javascript">
$('#preview1info').hide(); // Initially hide info
$('#preview1').click(function() { // Show on click
    $(this).next('#preview1info').fadeIn();
});
</script>

 

Thanks in advance

$('#previewinfo1').click(function(){

$('#previewinfo1').fadeOut();

});

 

Might do it? I've not tested it as I'm posting from my mobile.

That didn't work but I found a solution, for when I click outside the div it will hide.

 

 

$(document).mouseup(function (e)

{

var container = $("#preview1info");

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();

}

});

like this ?

 

 

also check this

Edited August 24, 201312 yr by sash_oo7

Made a small edit to sash_007 css so that clicking anywhere in the box will close it thats how i read it but not sure

 

http://jsfiddle.net/LHaad/

Bit more flexible to allow for multiple instances...just change the data-name accordingly (and sort out CSS )

 

http://jsfiddle.net/andy9l/t4bzL/