Jens de Bruijn Jens de Bruijn - 1 year ago 64
CSS Question

Expanding abbr in html

I would like to create expanding abbreviations, like on this website. However the the css and js are minimized and in so many tags, I got stuck with my limited css/js/html-knowledge. So far I have the following code:

<abbr title="test" aria-expanded="trueclass="active">

If anyone could help me futher, I would be very grateful

Answer Source

Here is a simple snippet I have made following the website you provided.

First you need to have a paragraph, then put the abbr-expand element right next to the abbr tag, and use scripts (I use jQuery for this) to toggle its display on button clicked.

(function() {
  $("abbr").on("click", ".abbr-opener", function() {
    $parent = $(this).parent();
    $text = $parent.attr("title");
.abbr-opener {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  vertical-align: bottom;
  background-color: grey;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: transform .2s ease-in;
.abbr-opener span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
.abbr-opener.opening {
  transform: rotate(45deg);
.abbr-expand {
  display: none;
  width: 500px;
  margin: 50px;
<script src=""></script>

Sind <abbr title="De Verenigde Staten bestaan sinds de 1776. Maar in 1780 was het politiek nog veel te onrustig, dus de eerste volkstelling werd gepland voor 1790.">
  1790 <div class="abbr-opener"><span>+</span></div>
<div class="abbr-expand">
  <span class="abbr-expandtext"></span>
</div> wordt er in Amerika een volkstelling gehouden die de bevolking verdeelt op basis van ras.