Php 制作特定于帖子的切换按钮

我在functions.php中创建了一个小部件，打算添加到服务部分。我使用小部件创建并显示了6个独特的服务。在每个服务中，都有一个“更多”按钮，单击该按钮可切换其余内容。现在的问题是，每当我单击任何服务的“更多”按钮时，所有其他服务都将切换。如何修改切换脚本，以便当用户单击服务a的按钮时，只切换服务a的内容而不影响其他内容？下面是我的代码和屏幕截图“

//functions.php

<div class="col-lg-4 col-sm-4 focus-box" data-scrollreveal="enter left after 0.15s over 1s">

        <?php if( !empty($instance['image_uri']) && ($instance['image_uri'] != 'Upload Image') ) { ?>

            <div class="service-icon">

                <?php if( !empty($instance['link']) ) { ?>

                    <a href="<?php echo $instance['link']; ?>"><i class="pixeden" style="background:url(<?php echo esc_url($instance['image_uri']); ?>) no-repeat center;width:100%; height:100%;"></i> <!-- FOCUS ICON--></a>

                <?php } ?>

            </div>

        <?php } elseif( !empty($instance['custom_media_id']) ) {

                $zerif_ourfocus_custom_media_id = wp_get_attachment_image_src($instance["custom_media_id"] );
                if( !empty($zerif_ourfocus_custom_media_id) && !empty($zerif_ourfocus_custom_media_id[0]) ) {
                    ?>

                        <div class="service-icon">

                            <?php if( !empty($instance['link']) ) { ?>

                                <a href="<?php echo $instance['link']; ?>"><i class="pixeden" style="background:url(<?php echo esc_url($zerif_ourfocus_custom_media_id[0]); ?>) no-repeat center;width:100%; height:100%;"></i> <!-- FOCUS ICON--></a>

                            <?php } ?>


                        </div>

                    <?php
                }

            }
        ?>

        <div class="focus-right">
        <h3 class="red-border-bottom boxeq"><?php if( !empty($instance['title']) ): echo apply_filters('widget_title', $instance['title']); endif; ?></h3>
        <!-- FOCUS HEADING -->

        <?php
            if( !empty($instance['text']) ) {
                echo '<p class="boxeq2">';
                    echo nl2br(htmlspecialchars_decode(apply_filters('widget_title', $instance['text'])) );
                echo '</p>';
            }
        ?>

         <!-- MORE -->
        <?php
            if( !empty($instance['textmore']) ) {
                echo '<p class="focusmore">';
                    echo nl2br(htmlspecialchars_decode(apply_filters('widget_title', $instance['textmore'])) );
                echo '</p>';
            }
        ?>

            <button id="showfocus1" class="btn-services">See More</button>
            <button id="hidefocus1" class="btn-services">See Less</button>

    </div>
    </div>

---

试试这个：我在按钮中添加了类来显示更多或更少的内容

$（'.focusmore'）.hide（）；
$（'.hidefocus'）。在（'click'，function（）上{
$（this.toggle（）；
$（this.sides（'.showfocus'）.toggle（）；
$（this.sides（'.focusmore'）.toggle（）；
});
$（'.showfocus'）。在（'click'，function（）上{
$（this.toggle（）；
$（this.sides（'.hidefocus'）.toggle（）；
$（this.sides（'.focusmore'）.toggle（）；
})；

小部件标题
洛雷姆·伊普斯姆·多洛·马萨，在实验室里，在狮子座和修女座上，他是一个充满活力的人
测试测试测试测试测试测试FAF
查看更多
少看
小部件标题
洛雷姆·伊普斯姆·多洛·马萨，在实验室里，在狮子座和修女座上，他是一个充满活力的人
测试测试测试测试测试测试FAF
查看更多
少看
小部件标题
洛雷姆·伊普斯姆·多洛·马萨，在实验室里，在狮子座和修女座上，他是一个充满活力的人
测试测试测试测试测试测试FAF
查看更多
少看

试试这个：我在按钮中添加了类来显示更多或更少的内容

$（'.focusmore'）.hide（）；
$（'.hidefocus'）。在（'click'，function（）上{
$（this.toggle（）；
$（this.sides（'.showfocus'）.toggle（）；
$（this.sides（'.focusmore'）.toggle（）；
});
$（'.showfocus'）。在（'click'，function（）上{
$（this.toggle（）；
$（this.sides（'.hidefocus'）.toggle（）；
$（this.sides（'.focusmore'）.toggle（）；
})；

小部件标题
洛雷姆·伊普斯姆·多洛·马萨，在实验室里，在狮子座和修女座上，他是一个充满活力的人
测试测试测试测试测试测试FAF
查看更多
少看
小部件标题
洛雷姆·伊普斯姆·多洛·马萨，在实验室里，在狮子座和修女座上，他是一个充满活力的人
测试测试测试测试测试测试FAF
查看更多
少看
小部件标题
洛雷姆·伊普斯姆·多洛·马萨，在实验室里，在狮子座和修女座上，他是一个充满活力的人
测试测试测试测试测试测试FAF
查看更多
少看

您可能不止一次使用ID。ID必须是唯一的。使用唯一ID，您可以为目标实体调用该函数。@JaxCze如何创建唯一ID？该小部件只是一个正在复制的小部件，因此我不容易在脚本中使用多个ID。您可能不止一次使用ID。ID必须是唯一的。使用唯一ID您可以为目标实体调用该函数。@JaxCze如何创建唯一ID？该小部件只是一个正在复制的小部件，因此我不容易在脚本中使用多个ID。非常感谢，您为我省去了很多麻烦。我已经调整了代码。切换现在工作得很好。非常感谢AgainHanks，您为我节省了很多时间eadache。我已经调整了我的代码。开关现在工作得很好。再次感谢

/* SERVICES TOGGLE*/

;(function ($) {
    function clickHandler3() {
        $('#hidefocus1').toggle();
        $('#showfocus1').toggle();
        $('.focusmore').toggle('slow');
    }

    $(document).ready(function(){
        $('#hidefocus1, .focusmore').hide();

        $('#hidefocus1, #showfocus1').on('click', clickHandler3);
    });
})(jQuery);