HTML页面-扩展数据

我想在一个网页上显示一些信息，允许用户在需要时向下搜索数字。我知道我想要它做什么，但甚至不知道从哪里开始弄清楚

我想做的是以下（或类似的事情）

单击+（或其他任何内容，甚至行）时，它将展开为以下内容

   Date      Item              Total
 - 7/2/2018  Apples            1000
   7/2/2018  Honey Crisp       250
   7/2/2018  Golden Delicious  500
   7/2/2018  Granny Smith      250

这样的事情可能吗？从哪里开始查找？

纯CSS解决方案：

ul{
列表样式类型：无；
}
标签{
背景色：#AAAFAB；
边界半径：5px；
填充：3倍；
左侧填充：25px；
颜色：白色；
}
李{
利润率：10px；
填充物：5px；
}
输入[类型=复选框]{
显示：无；
}
输入[type=checkbox]~ul{
最大高度：0；
最大宽度：0；
不透明度：0；
溢出：隐藏；
空白：nowrap；
-webkit过渡：所有.3s轻松；
-moz过渡：全部.3s轻松；
-o-过渡：全部3秒轻松；
过渡：全部。3秒轻松；
}
输入[类型=复选框]：选中~ul{
最大高度：100%；
最大宽度：100%；
不透明度：1；
}
输入[类型=复选框]+标签：在{
转化来源：25%50%；
边框：8px实心透明；
边框宽度：8px 12px；
左边框颜色：白色；
左边距：-20px；
宽度：0；
身高：0；
显示：内联块；
文本对齐：居中；
内容：''；
颜色：#AAAFAB；
-webkit过渡：所有.3s轻松；
-moz过渡：全部.3s轻松；
-o-过渡：全部3秒轻松；
过渡：全部。3秒轻松；
位置：绝对位置；
页边顶部：1px；
}
输入[类型=复选框]：选中+标签：之前{
变换：旋转（90度）；
}

一级


2-A级

3-A级内容
3-B级内容



2-B级


3-A级

4-A级内容
4-B级内容
4-C级内容
4-D级内容



3-B级

4-A级内容
4-B级内容



3-C级

4-A级内容
4-B级内容
4-C级内容





2-C级

3-A级内容

是的，可以使用Javascript。请分享你已经尝试过的，并解释为什么它不起作用。堆栈溢出不是免费的驱动器通过代码生成服务；没有人会为你写。我没有任何代码，也没有要求代码。我要的是研究的理论。如果你注意到在最初的帖子中我特别声明我在问从哪里开始搜索。谢谢。在这种情况下，我提到Javascript的评论应该足以开始你的研究。查看下拉列表。可能重复MajiD，James。。谢谢我真的不是在寻找代码，而是研究如何完成任务的主题。我感谢你的帮助。。是的，这个CSS例子正是我想要的。@MajiD做了所有的艰苦工作；我只是把它放到一个可执行的代码段中。他们应该得到所有的赞扬。谢谢你@詹姆斯，其实是你教我的。我不知道这个片段；）你们两个都让我走上了正轨。。我最终决定使用自助式手风琴。我喜欢它，因为它非常干净，代码很少。

   Date      Item              Total
 - 7/2/2018  Apples            1000
   7/2/2018  Honey Crisp       250
   7/2/2018  Golden Delicious  500
   7/2/2018  Granny Smith      250