Javascript 单个详细信息按钮和全局详细信息按钮

我正试图通过直接单击信息图形中的按钮来隐藏和显示信息图形中的详细信息。有3个按钮，我想单独显示其中的内容。但同时我有另一个细节按钮，应该显示和隐藏所有的细节

这是到目前为止我的代码

<div class="item" style="background: #eeeeef;">
    <div class="it-con alltag-con">
        <div class="einlagen-con-neu">
            <div class="ein-con-rel">
                <img class="einlage-neu" src="<?php bloginfo('stylesheet_directory'); ?>/img/einlagen-ip/alltag-ip-min.png" />
                <div class="detail-1-alltag detail-inf">
                    <div class="detail-inf-con hide-ein">
                        <h5>Pelotte</h5>
                        <span class="line-karo"></span>
                        <p>stimuliert die Muskulatur
                            <br> und entlastet gleichzeitig
                            <br> die Achillessehne</p>
                        <span class="caro-einlage"></span>
                    </div>
                </div>
                <div class="detail-2-alltag detail-inf">
                    <div class="detail-inf-con hide-ein">
                        <h5>Detorsionskern</h5>
                        <span class="line-karo"></span>
                        <p>stärkt den Mittelfußbereich
                            <br> und bietet statische
                            <br> Korrektur
                        </p>
                        <span class="caro-einlage"></span>
                    </div>
                </div>
                <div class="detail-3-alltag detail-inf">
                    <div class="detail-inf-con hide-ein">
                        <h5>Fersenschale</h5>
                        <span class="line-karo"></span>
                        <p>umfasst die Ferse sanft
                            <br> und führt den Fuß optimal
                        </p>
                        <span class="caro-einlage"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="mess-text">
            <span class="x-btn">&#10005;<br></span>
            <span class="ei-btn"><span class="karo"></span>INFO
            </span>
            <h4><?php the_field('ueberschrift_einlagen', 102); ?></h4>
            <br>
            <p>
                <?php the_field( 'texte_einlagen', 102); ?>
            </p>
            <span class="ei-btn-s"><span class="karo"></span> INFOS</span>
        </div>
        <div class="toggle">
            <div class="det-btn"><span class="karo"></span> Detail</div>
            <div class="inf-btn">Info</div>
        </div>
    </div>
</div>

这里还有一个jsfiddler

非常感谢你的帮助

---

：）

请创建相同的JSFIDLE请创建JSFIDLE或PLUNKER创建JSFIDLE。js代码主要用来解释我想做什么。感谢您对此进行调查。：）

$(".caro-einlage").click(function(e) {
    //e.preventDefault();
    $(this).parent(".detail-inf-con").toggleClass("hide-ein");
    //$(this).prev(".state-1").toggleClass("hide");
});

$(".alltag-con .det-btn").click(function(e) {
    //e.preventDefault();
    $(".alltag-con .detail-inf-con").toggleClass("hide-ein");
    //$(this).prev(".state-1").toggleClass("hide");
});