<h1>Trending Words</h1>
<p class="subheading">May 25<sup>th</sup> - June 1<sup>st</sup> 2018 <a href="http://www.dictionary.com/e/trending-words-2018-5-25-6-1/" target="_blank" rel="noreferrer noopener">Dictionary.com</a></p>

<dl>
  <dt>Racist</dt>
  <dd>a person who believes in racism, the doctrine that one's own racial group is superior or that a particular racial group is inferior to the others</dd>
  
  <dt>Abhorrent</dt>
  <dd>1) causing repugnance; detestable; loathsome 2) utterly opposed, or contrary, or in conflict (usually followed by to) 3) feeling extreme repugnance or aversion (usually followed by of)</dd>
  
  <dt>Repugnant</dt>
  <dd>1) distasteful, objectionable, or offensive 2) making opposition; averse. 3) opposed or contrary, as in nature or character.</dd>
  
  <dt>Normalcy</dt>
  <dd>the quality or condition of being normal, as the general economic, political, and social conditions of a nation; normality:</dd>
  
  <dt>Maleficent</dt>
  <dd>doing evil or harm; harmfully malicious</dd>
  
  <dt>Feckless</dt>
  <dd>1) ineffective; incompetent; futile 2) having no sense of responsibility; indifferent; lazy.</dd>
  
  <dt>Fidelity</dt>
  <dd>1) strict observance of promises, duties, etc.: 2) loyalty: 3) conjugal faithfulness.</dd>
  
  <dt>Bronx cheer</dt>
  <dd>a loud, abrasive, spluttering noise made with the lips and tongue to express contempt</dd>
  
  <dt>Recusal</dt>
  <dd>the disqualification of a judge for a particular lawsuit or proceeding, especially due to some possible conflict of interest or prejudice</dd>
</dl>

<p>Inspiration: <a href="https://dribbble.com/shots/2245540-Day-079-Collapsable-Sidebar" target="_blank" rel="noopener noreferrer">Collapsable Sidebar by Paul Flavius Nechita</a></p>
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,600');

body{
  background:#d1dce7;
  font-family:"Montserrat", sans-serif;
  font-weight:300;
  line-height:1.5em;
  padding:15px;
  text-align:center;
}
h1{
  margin-bottom:5px;
}
.subheading{
  font-size:.9em;
  margin-top:0;
  text-transform:uppercase;
}

dl{
  margin:30px auto 60px;
  max-width:300px;
}

dt{
  background:#505662;
  border-left:8px solid #1F2024;
  color:#B6BCCC;
  font-weight:600;
  padding:15px;
  position:relative;
  text-align:left;
  text-transform:uppercase;
  transition: all .5s;
}

dt:after,dt:before{
  content:"\f078";
  font-family:fontAwesome;
  position:absolute;
  right:15px;
  height:28px;
  top:0;
  bottom:0;
  margin:auto;
  
  transition:all .7s ease-in-out;
}

dt:before{
  opacity:0;
  transition:all .4s ease-in-out;
}

dt:hover{
  cursor:pointer;
}

dt + dd{
  max-height:0;
}

dd{
  background:#1C1C1C;
  color:#edeff3;
  margin:0;
  overflow:hidden;
  padding:1px 15px;
  
  transition: all .5s;
}

dt.open{
  background:#0E0C0D;
  border-color:#0E0C0D;
  color:#edeff3;
  margin:-5px;
}

dt.open:after{
  transform:rotate(180deg) translateY(-2px);
}
dt.open:before{
  opacity:1;
  transform:rotate(-360deg) translateY(-3px);
}

dt.open + dd{
  padding:15px 15px 30px;
  margin:0 -5px;
  max-height:200px;
}
$(function(){
  $("dt").click(function(){
    $(this).toggleClass("open");
    if($(this).hasClass("open"))
      $("dt").not(this).removeClass("open");
  })
})

External CSS

  1. https://use.fontawesome.com/releases/v5.0.13/css/solid.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js