<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<title>jQuery Click Outside Test</title>
<style>
.more-information {display: none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
$('.read-more a').bind('click', function(){
$('.more-information').hide();
$('.read-more a').show();
$('.more-information', $(this).closest('.title')).show('slide');
$(this).hide();
});
$('.hide-more-information').bind('click', function(){
$('.more-information').hide('slide');
$('.read-more a').show();
});
});
</script>
</head>
<body>
<ul>
<li id="a" class="title">
<h2>Aa<span class=""></span></h2>
<p class="introduction">AAA</p>
<p class="more-information">AAAA<br><span class="hide-more-information"><a href="javascript://">詳細を閉じる</a></span></p>
<p class="read-more"><span><a href="javascript://">詳細をみる</a></span></p>
</li>
<li id="b" class="title">
<h2>Bb<span class=""></span></h2>
<p class="introduction">BBB</p>
<p class="more-information">BBBB<br><span class="hide-more-information"><a href="javascript://">詳細を閉じる</a></span></p>
<p class="read-more"><span><a href="javascript://">詳細をみる</a></span></p>
</li>
<li id="c" class="title">
<h2>Cc<span class=""></span></h2>
<p class="introduction">CCC</p>
<p class="more-information">CCCC<br><span class="hide-more-information"><a href="javascript://">詳細を閉じる</a></span></p>
<p class="read-more"><span><a href="javascript://">詳細をみる</a></span></p>
</li>
</ul>
</body>
</html>
