fadeIn a div with a click, but then click anywhere to hide an element
Question
I followed almost any previously asked questions but I couldn't figure it out.
I have got such a simple welcome page containing a few lines. In that content there are 2 links to show some informations below (Those informations are hidden by CSS). When you click any of them you can see it below, and the Jquery hides the other one. It works fine.
But I need to hide them when I click anywhere:
To see mine in action: http://jsfiddle.net/Tks5L/
$(document).ready(function () {
var container = $('#info_area');
$('#contentart span').click(function () {
var active = $(container.find('div')[$(this).prevAll('span').length]);
active.siblings().hide();
active.fadeIn("slow");
});
});
and html
<body>
<div id="wrap">
<section id="headerall">
<header>Welcome</header>
<div class="clr"></div>
</section>
<div class="clr"></div>
<section id="content">
<article id="contentart">
<p id="contentp">
content content content content content content content conten content content content; fade in link 1 <span class="mailgsminfo1">info 1</span> or or or <span class="mailgsminfo2">info 2</span> content text content text.<br /> Thanks
</p>
<div class="clr"></div>
</article>
<article id="info_area">
<div class="info1"><span class="title">info 1:</span> info 1 must show here</div>
<div class="info1"><span class="title">info 2:</span> info 2 must show here</div>
</article>
</section>
<div class="clr"></div>
</div> <!-- Wrap ende -->
</body>
Could you help me how to hide my those info parts?
2 answers
solution1
1 ACCPTED 2013-06-12 11:43:10
You could do it like that:
$(document).ready(function () {
$('.info1').css('outline',0).attr('tabindex', -1).on('focusout', function () {
$(this).hide();
});
var container = $('#info_area');
$('#contentart span').click(function () {
var active = $(container.find('div')[$(this).prevAll('span').length]);
active.siblings().hide();
active.fadeIn("slow").focus();
});
});
solution2
0 2013-06-12 11:46:10
You can add this to hide info
$(document).on('click', function (e) {
if (!$(e.target).is('#contentart span')) {
$('#info_area div').hide();
}
});
Demo ---> http://jsfiddle.net/Tks5L/3/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.