<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color: blue;
            color: white;
        }
        .content{
            min-height: 50px;
        }
        .hide{
            display: none;
        }

    </style>
</head>
<body>
    <div style="height: 400px;width: 80px;border: 1px solid red">
        <div class="item">
            <div class="header">标题1</div>
            <div class="content">内容</div>
        </div>
        <div class="item">
            <div class="header">标题2</div>
            <div class="content hide">内容</div>
        </div>
        <div class="item">
            <div class="header">标题3</div>
            <div class="content hide">内容</div>
        </div>
        <div class="item">
            <div class="header">标题4</div>
            <div class="content hide">内容</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.header').click(function () {
//          $(this).next() 下一个
//       $(this).prev() 上一个
//       $(this).parent() 父类
//       $(this).children() 孩子
//       $(this).siblings() 兄弟
//       $(this).find(''#i1) 子子孙孙中查找
 $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')

        })

    </script>

</body>
</html>