Show original element after clicking outside of the secondary element

Show original element after clicking outside of the secondary element

I want hide secondary image when user clicks anywhere else like somewhere
in the page so if you look at the jfiddle, black box should become red
again after user clicks outside of the black box.
I got the hiding code from this source: Use jQuery to hide a DIV when the
user clicks outside of it.
Thanks
HTML:
<img id="language_arrow_bottom" src="http://placehold.it/32/ff0000"
width="13px" height="13px" alt="" />
<img id="language_arrow_up" src="http://placehold.it/32/000000"
width="13px" height="13px" alt="" style="display:none;" />
JS:
$(document).ready(function ()
{
$('#language_arrow_bottom').click(function(event)
{
$('#language_arrow_bottom').hide();
$('#language_arrow_up').show();
});
$('#language_arrow_up').click(function(event)
{
$('#language_arrow_up').hide();
$('#language_arrow_bottom').show();
});
var container = $('#language_arrow_up');
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.hide();
$('#language_arrow_bottom').show();
}
});