I would like to create expanding abbreviations, like on this website. So far I have the following code:

<abbr title="test" aria-expanded="true" class="active">
  1790
  <span></span>
</abbr>

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

I would like to create expanding abbreviations, like on this website. So far I have the following code:

<abbr title="test" aria-expanded="true" class="active">
  1790
  <span></span>
</abbr>

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

• javascript
• html
• css

4 Answers 4

I'm going to dissect this into two parts: HTML and CSS styling.

HTML

The abbreviation works as it should without any JS/CSS. You can see that by creating a very simple html file using the code above. You can see this from the example on Mozilla (link: https://developer.mozilla/en-US/docs/Web/HTML/Element/abbr)

<abbr title="Hypertext Markup language">HTML</abbr>

CSS Styling

The CSS that applies for the example you gave is styling for the arrow button next to the abbr and the cursor when hovering. The styling for this is in the css. Note that the CSS below requires the abbr to be inside an element with class="publication-body", but you could remove the ".publication-body" definition as needed.

This part changes the hover color and pointer:

.publication-body abbr {
    border: none;
    cursor: pointer
}

.publication-body abbr:hover {
    color: #df5b57
}

This part makes the circle and down arrow in the span after the abbr:

.publication-body abbr span {
    width: 18px;
    height: 18px;
    background-color: #eae9e9;
    border-radius: 9px;
    position: relative;
    top: 4px;
    display: inline-block;
    margin-left: 6px
}

.publication-body abbr span:after {
    content: "";
    position: absolute;
    top: 7px;
    left: 3px;
    border-style: solid;
    border-width: 6px 6px 0;
    border-color: #df5b57 transparent
}

.publication-body abbr.active span:after {
    top: 5px;
    border-width: 0px 6px 6px;
    border-color: #df5b57 transparent
}

You can try a CSS-only approach:

abbr:not(:focus) {
  cursor: pointer;
}
abbr:focus::after {
  cursor: auto;
  content: attr(title);
  display: inline-block; /* Get rid of parent's text decoration */
  width: 100%;
  padding: 1em;
  box-sizing: border-box;
}

<p>The <dfn id="whatwg"><abbr
title="Web Hypertext Application Technology Working Group" tabindex="-1">WHATWG</abbr></dfn>
is a loose unofficial collaboration of Web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.</p>

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() {
    var $parent = $(this).parent(),
        $text = $parent.attr("title");
    $(this).toggleClass("opening");
    $parent.next(".abbr-expand").text($text).fadeToggle();
  });
})();

.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="https://ajax.googleapis./ajax/libs/jquery/1.10.0/jquery.min.js"></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>
</abbr>
<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.

This is the markup they use ...

<abbr aria-controls="insertion-infocard-contents-73397" aria-expanded="false" data-id="73397" 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.">

See here ...

http://www.w3schools./tags/tag_abbr.asp