Javascript 如何使用Jquery切换从按钮读取更多内容？

我有这个文本，我想用Jquery切换它

<div class="section-right">
    <h1>
         about us
    </h1>
    <h2>
        real fitness depends on excercise.
    </h2>
    <div class="detail-text" data-simplebar data-simplebar-auto-hide="false">
        <p class="more">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        </p>
    </div>
    <button class="myButton readMore">
        <span>
            More About
        </span>
        <div><img src="assets/images/rightArrow.png" alt="arrow"></div>
    </button>
</div>

我的逻辑是切换

more

类的

readmore

按钮同级。

---

如何使用非直接同级的按钮切换上述文本？

我认为这对您很有用：

//阅读更多文本
var-showChar=100；
$（'.more'）。每个（函数（）{
var content=$（this.html（）；
如果（content.length>showChar）{
var c=content.substr（0，showChar）；
var h=content.substr（showChar，content.length-showChar）；
var html=c++'+''.'+'.'+''.+h++'；
$（this）.html（html）；
}
});
$（“.readMore”）。单击（函数（）{
$（this）.sides（'.detail text'）.children（'p'）.toggleClass（'more'）；
});
p span.more椭圆{
显示：无；
}
p、 更多span.more椭圆{
显示：内联；
}
.更多span.更多内容{
显示：无；
}

关于我们
真正的健康取决于锻炼。

同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一

更多关于

// Readmore Text
var showChar = 100;
$('.more').each(function () {
    var content = $(this).html();

    if (content.length > showChar) {

        var c = content.substr(0, showChar);
        var h = content.substr(showChar, content.length - showChar);

        var html = c + '<span class="moreellipses">' + "..." + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;</span>';

        $(this).html(html);
    }
});

$(".readMore").click(function () {
    // $(this).prev('.detail-text p').slideToggle(500);
    // $(this).prev('.detail-text p').toggleClass('more');
});