Javascript 如何编写包含内容但没有图片的幻灯片？

我一直在尝试制作一个有内容的“幻灯片”，下面有一个按钮，当点击时，会显示更多的内容。我只能做css淡出，这不是我真正想要的。我回避javascript和JQuery，因为我还没有学会这一点，并且仍在努力掌握css和html

我不能上传图片，因为我缺乏声誉，但你能告诉我一个正确的编码方法吗？非常感谢你这是你想要的吗？（在右下角试一试）

第二次尝试：

第三次更新：

一些东西1
一些东西2
一些东西3
一些东西4
一些东西5
显示更多

#content>div{
/*隐藏一切*/
显示：无；
}
#内容>分区：第n个子项（1）{
/*显示第一个元素*/
显示：块；
}

//单击#showmore按钮时
$（“#显示更多按钮”）。在（“单击”上，函数（）{
//获取所有元素
变量元素=$（“#内容>div”）；
//获取可见元素
var visiblelelem=elems.filter（“：visible”）；
//获取下一个隐藏元素
var hiddenElem=visiblelelem.next（）；
//如果当前元素之后没有隐藏元素
//可以缩短为if（！hiddenElem.length）{
如果（！hiddenElem.length）{
//使隐藏元素成为第一个隐藏元素；
hiddenElem=elems.filter（“：first”）；
}
//隐藏当前可见元素
Visiblelem.hide（）；
//显示下一个隐藏元素
hiddenElem.show（）
});

---

可以添加淡入效果和内容，如果可以，请告诉我。

这与我想要的非常接近，但当第二件事情显示出来时，我希望第一件事情消失，这是可能的吗？谢谢你，我一直在尝试，但没有成功。当它上升到某些内容5时，我如何使其返回到1？这是一个连续循环，谢谢你有b我只是帮了忙，非常感谢