标题下的可折叠文本

Question

当我在我的网页 https://rubencioak.github.io/research.html 中按下单词 'Abstract' 时，我试图使文本可折叠，我认为以下代码就足够了：

<ol class="lead">

<li> <p> <b>Free-riding in Collective Agreements,a Search and Matching Model of Minimum Wages</b> 
<br />  

<span id="abstract-link" class="abstract-click">Abstract</span>
<p class="abstract-text" style="display:none; font-size:.90em">Does free riding in collective... unemployment, at a cost of employed earning less</p>

</p> </li> </ol>

我正在使用来自 HTML5 的模板并查看此网页：https://messertodd.github.io/research.html。供参考。

现在，虽然我认为它基本上是一样的，但这段代码显然有问题。

总而言之，问题是：有没有一种简单的方法可以使我在 abstrac 一词下的文字可折叠？

如有任何帮助，我们将不胜感激。

韩国

Answer 1

您可以使用 <details> and <summary> 标签：

    <details>
        <summary>Abstract</summary>
        <p class="abstract-text" style="font-size:.90em">Does free riding in collective... unemployment, at a cost of employed earning less</p>
    </details>

标题下的可折叠文本

Collapsible text under title

html

collapsable