用css展开和折叠

我在Jquery中创建了一个函数来扩展和折叠div的内容，但是现在我只想使用CSS并使用箭头图像，就像下面这些

查看实况

我还想消除所有这些标记span，只保留div及其内容

这里是我到目前为止的代码

<div class='showHide'>
    <span class='expand'><span id="changeArrow">&#8593;</span>Line expand and collapse</span>
    <fieldset id="fdstLorem">Lorem ipsum...</fieldset>
</div>

.fieldsetContainer{
身高：0；
溢出：隐藏；
过渡：高度400ms线性；
}
#拨动{
显示：无；
}
#切换：选中~.fieldsetContainer{
高度：50px；
}
label.arrow dn{display:inline block；}
label.arrow up{display:none；}
#切换：选中~label.arrow dn{display:none；}
#切换：选中~label.arrow up{display:inline block；}

↑
↓
线膨胀和塌陷
乱数假文。。。

我的方法是这样的，与使用复选框进行操作相比，它既简单又干净，但只在悬停或单击并按住时展开（这对触摸很有好处）

.可倒塌{
高度：1.2rem；
溢出：隐藏；
}
.可折叠：活动，.可折叠：悬停{
高度：自动；
}

与

第一行将始终显示


但下面的东西只有在悬停或点击拖动后才能显示出来。这很整洁。

你不能只使用css。我想我可以。那么，我如何才能至少用这些箭头和删除不必要的html呢？看看这个纯CSS解决方案：@deKajoo纯CSS是可能的。有没有什么好方法可以让这项工作适用于每页多个可折叠区域？

$(document).ready(function () {
    $('.showHide>span').click(function () {
        $(this).next().slideToggle("slow");
        return false;
    });
    $(".showHide>span").toggle(function () {
        $(this).children("#changeArrow").text("↓");
    }, function () {
        $(this).children("#changeArrow").text("↑");
    });
});

<style>

.collapse-able {
    height: 1.2rem;
    overflow: hidden;
}

.collapse-able:active, .collapse-able:hover {
    height: auto;
}

</style>

<div class="collapse-able">
  <h1> The first line will always show </h1>
  </br> 
  But what's underneath won't until hover or click and drag. Which is neat.
</div>