创建一个“阅​​读更多”链接来扩展页面上的内容

我想创建一个阅读更多链接，该链接将扩展已显示的段落以显示同一页面上的整个文本。如果这个问题可以通过 HTML5 和 CSS 来解决，我希望如此，但我认为需要某种类型的脚本。

例如：

示例文本

Lorem ipsum dolor sat amet，consectetur adipiscing elit。 Nam porttitor feugiat ipsum quis ullamcorper。 Nullam vitae velit vitae totortor semper tempor ac vitae magna。 Maecenas 是一个 ullamcorper neque。 Aliquam vitae totortor luctus nisi rutrum eleifend 非非狮子座。

Sed eleifend lectus id semper accumsan。 Sed lobortis id ligula eget blandit。 Integer interdum iaculis nunc，sed porttitor magnatincidunt in。Interdum etmalesuada在faucibus中在 ipsum primis 之前名声大噪。 Aliquam lobortis accumsan tempor。 Aliquam sollicitudin pulvinar est，quis convallis Tellus。

阅读更多>>

我希望通过下面的“阅读更多>>”链接显示普通文本，然后单击该链接后将显示粗体文本。

我还想在隐藏部分有一个图像，这可能吗？

提前致谢。

一个普通的 JS 替代方案：

HTML：

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor feugiat ipsum quis ullamcorper. Nullam vitae velit vitae tortor semper tempor ac vitae magna. Maecenas a ullamcorper neque. Aliquam vitae tortor luctus nisi rutrum eleifend non non leo.</p>
<div id="more" style="display:none;">
    <p>Sed eleifend lectus id semper accumsan. Sed lobortis id ligula eget blandit. Integer interdum iaculis nunc, sed porttitor magna tincidunt in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam lobortis accumsan tempor. Aliquam sollicitudin pulvinar est, quis convallis tellus.</p>
    <img..../>
</div>
<a href="javascript:showMore()" id="link">Read More >></a>`

The JS:

function showMore(){
    //removes the link
    document.getElementById('link').parentElement.removeChild('link');
    //shows the #more
    document.getElementById('more').style.display = "block";
}