Expandable Area

index.html

<button id="btnExpand" onClick="showMsg();">Click here to see all +</button>
<div id="welcomeMsg" class="closed">
  <div id="collapse-window" class="standard-window">
    <div class="inner-wrapper">

      <h5>In 2018, we also helped the following audiences:</h5>
      <p>Lorum ipsum</p>
      
      </ul>
    </div>
  </div>
</div>

site.js

<script type="text/javascript">
/**
  * Display msg
*/
function showMsg() {

  // cache welcomeMsg
  var welcomeMsg = jQuery('#welcomeMsg');

  // cache btnExpand
  var btnExpand = jQuery('#btnExpand');

  if ( welcomeMsg.is( ":hidden" ) ) {
    welcomeMsg.slideDown( "fast" );
    btnExpand.text("Click here to close -");
  } else {
    welcomeMsg.slideUp( "slow" );
    btnExpand.text("Click here to see all +");
  }


  // output message
  console.log("show message box");

}

/**
  * Hide msg
*/
function closeMsg() {

// cache welcomeMsg
var welcomeMsg = jQuery('#welcomeMsg');

// close msg
welcomeMsg.slideUp( "fast", function() {
  // Animation complete.
});

// output message
console.log("hide message box");

}

/**
  * Close msg on esc
*/
jQuery(document).keyup(function(event){
  // cache welcomeMsg
  var welcomeMsg = jQuery('#welcomeMsg');

  if(event.which=='27'){
      // close msg
      welcomeMsg.slideUp( "slow", function() {
        // Animation complete.
      });
  }
});
</script>

styles.css

.closed {
  display:none;
}

#collapse-window {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0);
  padding:15px;
}

#collapse-window .inner-wrapper {
  background-color: #fff;
  width: 480px;
  min-height: 320px;
  max-height: 80%;
  margin: 0 auto 0 auto;
  padding: 35px;
  border-radius: 0;
  /* box-shadow: 0px 0px 5px rgba(0,0,0,.6); */
}

.header {
  width:100%;
  float:right;
  text-align: right;
}

#collapse-window.standard-window h2 {
  font-family: Arial, Helvetica, sans-serif;
  color:#000000;
  margin-top:0;
}

#collapse-window.standard-window p {
  color:black;
}

#collapse-window.standard-window p {
  font-size: 1.4rem;
  line-height: 1.4;
}

#collapse-window.standard-window ul li {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.4rem;
}

button#btnExpand{
font-size:18px; 
  background: transparent;
  color:#0078b3;
  border:none;
  outline:none;
  padding:8px;
  border-radius:0;
}

button.btnClose {
  background: #0078b3;
  color:#ffffff;
  padding:3px 5px;
  font-size:11px;
}

ul li { padding-bottom:12px; }