一个界面有多个折叠和展开按钮，怎么使用css实现？

<div class="posts-container">
            <div class="post-con">
                <div class="post-detail">
                    <div class="post-head-portrait">
                        <img alt="" src="../images/IMG_1684.JPG">
                        <div class="post-basic-info">
                            <span class="post-username">咕噜噜</span>
                            <br/>
                            <span class="post-info">发布于12:00&nbsp;&nbsp;来自iPhone13 Pro Max</span>
                        </div>
                    </div>

                    <div class="post-content">
                        <div class="post-detail-text">
                            <div class="content displayed">
                                记不起从什么时候开始，相声这门艺术真正地走进了我们大众的生活中，从而也带动了这门艺术的发展，不断地与新时代的文化进行磨合，不断深入到现代生活，当然这样的进步离不开相声演员们对传统艺术的传承和创新。
                                目前最受欢迎的相声演员大多出自德云社，有很多相声界的新型代表。不得不说德云社就像一个其乐融融的大家庭，家庭的幸福美满离不开家长的管教和约束，更是家长为孩子们营造了良好的家庭环境，才成就了这么多优秀的相声演员。
                            </div>
                            <span class="expand expand-extract">展开</span>
                            <div class="content hiddened">
                                一、生死亲情的友情<br/>
                                我们都知道，现在在台前出演的于谦老师和郭德纲老师，是这个家庭的主要领导人，这两位的交情，用友情来形容都觉得单薄，不如说是亲情。郭德纲刚刚创办德云社时没有固定搭档，德云社也没有现在这么享誉全国。
                                2000年，郭德纲和于谦首次合作那是在一个露天社区里，两人配合的相当默契，得心应手。在多次合作后，于老师有意加入德云社，可郭老师怕耽误于谦，决心在有所成就以后再诚意邀请于老师加入。
                                在此之后，两位老师就这样打着配合，一路走来有了于老师这样的好搭档，德云社一路名声走高，于是在2004年于谦正式加入了德云社，并成为了德云社的大股东。二十年过去了，这对搭档风风雨雨再也没有分开过，甚至是托妻献子的交情。
                                郭德纲的儿子郭麒麟拜在于老师门下，成为了于老师的徒弟，于谦的儿子同样拜在了郭老师门下。从最初的搭档合作，到后来的固定搭配，再到今时今日的你的左边永远是我，我的右边永远是你，这样的感情，早已超越友情。
                            </div>
                            <span class="extract expand-extract">收起</span>
                        </div>
                    </div>
                </div>

            </div>

            <div class="post-con">
                <div class="post-detail">
                    <div class="post-head-portrait">
                        <img alt="" src="../images/IMG_1684.JPG">
                        <div class="post-basic-info">
                            <span class="post-username">咕噜噜</span>
                            <br/>
                            <span class="post-info">发布于12:00&nbsp;&nbsp;来自iPhone13 Pro Max</span>
                        </div>
                    </div>

                    <div class="post-content">
                        <div class="post-detail-text">
                            <div class="content displayed">
                                记不起从什么时候开始，相声这门艺术真正地走进了我们大众的生活中，从而也带动了这门艺术的发展，不断地与新时代的文化进行磨合，不断深入到现代生活，当然这样的进步离不开相声演员们对传统艺术的传承和创新。
                                目前最受欢迎的相声演员大多出自德云社，有很多相声界的新型代表。不得不说德云社就像一个其乐融融的大家庭，家庭的幸福美满离不开家长的管教和约束，更是家长为孩子们营造了良好的家庭环境，才成就了这么多优秀的相声演员。
                            </div>
                            <span class="expand expand-extract">展开</span>
                            <div class="content hiddened">
                                一、生死亲情的友情<br/>
                                我们都知道，现在在台前出演的于谦老师和郭德纲老师，是这个家庭的主要领导人，这两位的交情，用友情来形容都觉得单薄，不如说是亲情。郭德纲刚刚创办德云社时没有固定搭档，德云社也没有现在这么享誉全国。
                                2000年，郭德纲和于谦首次合作那是在一个露天社区里，两人配合的相当默契，得心应手。在多次合作后，于老师有意加入德云社，可郭老师怕耽误于谦，决心在有所成就以后再诚意邀请于老师加入。
                                在此之后，两位老师就这样打着配合，一路走来有了于老师这样的好搭档，德云社一路名声走高，于是在2004年于谦正式加入了德云社，并成为了德云社的大股东。二十年过去了，这对搭档风风雨雨再也没有分开过，甚至是托妻献子的交情。
                                郭德纲的儿子郭麒麟拜在于老师门下，成为了于老师的徒弟，于谦的儿子同样拜在了郭老师门下。从最初的搭档合作，到后来的固定搭配，再到今时今日的你的左边永远是我，我的右边永远是你，这样的感情，早已超越友情。
                            </div>
                            <span class="extract expand-extract">收起</span>
                        </div>
                        
                    </div>
                </div>

            </div>
        </div>

$('.expand').each(function () {
        $(this).click(function (){
            $('.hiddened').show()
            $('.extract').html('收起')
            $('.expand').html('')
            $('.displayed').removeClass('displayed')
        });
    });


    $('.extract').each(function () {
        $(this).click(function (){
            $('.hiddened').hide()
            $('.expand').html('展开')
            $('.extract').html('')
            $('.displayed').addClass('displayed')
        }).click();
    });

代码有两个相同内容的帖子，因为内容过多，所以折叠显示。js代码则是通过类来增添和删除属性以达到展开和折叠的效果。但是因为类都是一样的，所以点击一个帖子的展开另一个帖子也会展开，折叠也一样，这种问题该怎么解决呢？

        $('.expand').html('展开')换成$(this).html('展开')试试