<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{padding: 0;margin: 0;}
p{width:200px;height: 40px;background:lightblue;margin-top: 10px;}
.item{width:200px;height: 80px;background: #17BEBB; display: none;}
</style>
</head>
<body>
<div>
<p></p>
<div class="item"></div>
<p></p>
<div class="item"></div>
<p></p>
<div class="item"></div>
<p></p>
<div class="item"></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$('p').click(function(){
$('p').css('background','lightblue')
$(this).css('background','pink')
$('.item').slideUp()
$(this).next().slideDown()
})
</script>
</body>
</html>