Toggle elements

e.g. Like the header nav & search

For this example, lets add a phone number to the html/sections/header.html.twig.

These elements are built up from a button & icon to open: 

<a data-toggle=".header-phone" class="nav-icon nav-phone-icon">
    <i class="fa fa-phone fa-lg"></i>
    <span>Phone</span>
</a>

 The data-toggle attribute points to the selector of the element to toggle, in this case a div with class of "header-phone"

We also make use of Font-Awesome here for the icon, <i class="fa fa-phone fa-lg"></i> this is using a phone icon, but full list of over 500 icons available here: http://fortawesome.github.io/Font-Awesome/icons/

And then the element to show: (with h2 font-size) 

<div class="header-phone togglable pull-right-md h2">
    {{ company.phone_number }}
</div>

 Then we need a line of css to indicate the estimated max-height: 

.header-phone.is-open {
    max-height: 100px; /* the estimated height */
}

 The max-height: 100px is the estimated height when open, setting this too small wont show the full element and setting this too big will not have as nice a slide open effect