cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <svg xmlns="http://www.w3.org/2000/svg" style="display:none"><symbol id="toko" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 10v7h3v-7H4zm6 0v7h3v-7h-3zM2 22h19v-3H2v3zm14-12v7h3v-7h-3zm-4.5-9L2 6v2h19V6l-9.5-5z"/></symbol><symbol id="call" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></symbol><symbol id="postcard" viewBox="0 0 24 24"><path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol id="email" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol id="website" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></symbol></svg>

<header class="header container">
<h1>Contacts</h1>
</header>


<main class="main container">
<section class="accordion js-accordion" id="accordion">

<h3>Alorem</h3>

<div>
  <div class="content-contact accordion_inner">
    <ul class="contact-list">
      <li><svg class="icon-svg-use"><use xlink:href="#toko"></use></svg>ALorem Ipsum</li>
      <li>Street 45</li>
      <li>1234 AB Town</li>
      <li><svg class="icon-svg-use"><use xlink:href="#postcard"></use></svg>Postbox 123</li>
      <li>1234 AB City</li>
      <li><svg class="icon-svg-use"><use xlink:href="#call"></use></svg>123 456 78 90</li>
      <li><svg class="icon-svg-use"><use xlink:href="#email"></use></svg>info@example.com</li>
      <li><svg class="icon-svg-use"><use xlink:href="#website"></use></svg><a href="http://example.com/">http://example.com/</a></li>
    </ul>

    <p>The <a href="#!">contact page</a> gives extra information about opening times office, banknummers etc. &hellip;</p>
  </div>
</div>

<h3>Blorem</h3>

<div>
  <div class="content-contact accordion_inner">
    <ul class="contact-list">
      <li><svg class="icon-svg-use"><use xlink:href="#toko"></use></svg>BLorem Ipsum</li>
      <li>Street 45</li>
      <li>1234 AB Town</li>
      <li><svg class="icon-svg-use"><use xlink:href="#postcard"></use></svg>Postbox 123</li>
      <li>1234 AB City</li>
      <li><svg class="icon-svg-use"><use xlink:href="#call"></use></svg>123 456 78 90</li>
      <li><svg class="icon-svg-use"><use xlink:href="#email"></use></svg>info@example.com</li>
      <li><svg class="icon-svg-use"><use xlink:href="#website"></use></svg><a href="http://example.com/">http://example.com/</a></li>
    </ul>

    <p>The <a href="#!">contact page</a> gives extra information about opening times office, banknummers etc. &hellip;</p>
  </div>
</div>

<h3>Clorem</h3>

<div>
  <div class="content-contact accordion_inner">
    <ul class="contact-list">
      <li><svg class="icon-svg-use"><use xlink:href="#toko"></use></svg>CLorem Ipsum</li>
      <li>Street 45</li>
      <li>1234 AB Town</li>
      <li><svg class="icon-svg-use"><use xlink:href="#postcard"></use></svg>Postbox 123</li>
      <li>1234 AB City</li>
      <li><svg class="icon-svg-use"><use xlink:href="#call"></use></svg>123 456 78 90</li>
      <li><svg class="icon-svg-use"><use xlink:href="#email"></use></svg>info@example.com</li>
      <li><svg class="icon-svg-use"><use xlink:href="#website"></use></svg><a href="http://example.com/">http://example.com/</a></li>
    </ul>

    <p>The <a href="#!">contact page</a> gives extra information about opening times office, banknummers etc. &hellip;</p>
  </div>
</div>

<h3>Dlorem</h3>

<div>
  <div class="content-contact accordion_inner">
    <ul class="contact-list">
      <li><svg class="icon-svg-use"><use xlink:href="#toko"></use></svg>DLorem Ipsum</li>
      <li>Street 45</li>
      <li>1234 AB Town</li>
      <li><svg class="icon-svg-use"><use xlink:href="#postcard"></use></svg>Postbox 123</li>
      <li>1234 AB City</li>
      <li><svg class="icon-svg-use"><use xlink:href="#call"></use></svg>123 456 78 90</li>
      <li><svg class="icon-svg-use"><use xlink:href="#email"></use></svg>info@example.com</li>
      <li><svg class="icon-svg-use"><use xlink:href="#website"></use></svg><a href="http://example.com/">http://example.com/</a></li>
    </ul>

    <p>The <a href="#!">contact page</a> gives extra information about opening times office, banknummers etc. &hellip;</p>
  </div>
</div>

<h3>Elorem</h3>

<div>
  <div class="content-contact accordion_inner">
    <ul class="contact-list">
      <li><svg class="icon-svg-use"><use xlink:href="#toko"></use></svg>ELorem Ipsum</li>
      <li>Street 45</li>
      <li>1234 AB Town</li>
      <li><svg class="icon-svg-use"><use xlink:href="#postcard"></use></svg>Postbox 123</li>
      <li>1234 AB City</li>
      <li><svg class="icon-svg-use"><use xlink:href="#call"></use></svg>123 456 78 90</li>
      <li><svg class="icon-svg-use"><use xlink:href="#email"></use></svg>info@example.com</li>
      <li><svg class="icon-svg-use"><use xlink:href="#website"></use></svg><a href="http://example.com/">http://example.com/</a></li>
    </ul>

    <p>The <a href="#!">contact page</a> gives extra information about opening times office, banknummers etc. &hellip;</p>
  </div>
</div>

</section> 
</main>

<div class="subfooter container">
<div class="login-custom" id="loginCustom">
  <div class="accordion accordion-login js-accordion" id="accordionLogin">

    <h3>log in</h3>

    <div class="accordion_inner">
      <div class="form form-login">

        <form name="loginform" id="loginform" action="#!" method="post">

          <p class="login-username">
          <label for="user_login">User</label>
          <input type="text" name="log" id="user_login" class="input" value="" size="20" />
          </p>
          <p class="login-password">
          <label for="user_pass">Password</label>
          <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" />
          </p>

          <p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" />Remember me</label></p>
          <p class="login-submit">
          <input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Login" />
          <input type="hidden" name="redirect_to" value="#!" />
          </p>

        </form>
        <p class="small">Password Lost? <a href="#!?action=lostpassword">ask for a new password</a></p>
      </div>
    </div>
  </div>

</div><!-- /.login-custom -->
</div><!-- /.subfooter -->

<footer class="footer container">
<div class="colophon">
  <small class="small">by <a href="http://atelierbramdehaan.nl/">Bram de Haan</a> &middot; <a href="https://github.com/atelierbram/Accordion-Module">on Github</a> &middot; <a href="https://codepen.io/atelierbram/pen/NqZpVg">on Codepen</a> adapted from <a href="https://github.com/pinceladasdaweb/accordion">Pinceladas da Web</a></small>
</div>
</footer> 
            
          
!
            
              *,
:after,
:before {
  box-sizing: inherit;
}

body,
html {
  height: 100%;
  background-color: #cbdee6;
}

body {
  font: 100%/1.5 "Fira Sans", AvenirNext-Regular, "Segoe Ui", "Lucida Grande", Verdana, sans-serif;
  margin: 0;
  color: #182c35;
  font-weight: 400;
  min-height: 100%;
  box-sizing: border-box;
}

h1 {
  font-size: 2.5em;
  padding: .125em 0 .25em .5em;
}

h1,
h3 {
  font-family: "Fira Sans", AvenirNextCondensed-Demibold, "Segoe UI", "Trebuchet MS", Tahoma, sans-serif;
  margin: 0;
  color: #5e7b87;
  font-weight: 500;
}

img,
svg {
  border: 0;
  max-width: 100%;
  height: auto;
}

a {
  color: #2394a4;
}

.footer {
  padding-top: 3em;
  padding-bottom: 1em;
  text-align: center;
}

.footer .small a {
  text-decoration: none;
  padding: .25em;
}

.footer .small a:hover {
  background-color: #5ec5ce;
  color: #fff;
}

.container,
.main {
  background-color: #fff;
}

.container {
  max-width: 40em;
  margin: 0 auto;
  overflow: auto;
}

.main {
  min-height: calc(100vh - 13em);
  padding: 2em 3em;
}

.header {
  min-height: 5em;
  padding-left: 2em;
}

.subfooter {
  min-height: 2em;
  padding-top: 3em;
}

.footer {
  min-height: 3em;
}

.form {
  max-width: 30em;
  padding: 1.5em 3em;
}

.form label {
  padding-left: .125em;
  color: #42758a;
}

.form p {
  margin: 0;
  padding: 0;
}

.form input[type=text],
.form input[type=password] {
  box-sizing: border-box;
  border-radius: 0;
  -webkit-appearance: none;
  background: #f4f8fa;
  border: 1px solid #cbdee6;
  color: #182c35;
  outline: 0;
  font-size: 24px;
  width: 100%;
  padding: .125em .25em;
  margin: 2px 6px 16px 0;
  text-align: left;
  height: 1.8em;
  vertical-align: top;
  font-family: inherit;
}

.form input[type=text][disabled],
.form input[type=password][disabled] {
  background-color: #eee;
}

.login-submit {
  float: right;
}

.button,
.form input[type=submit] {
  -webkit-appearance: none;
  display: inline-block;
  outline: 0;
  margin: 0;
  padding: .5em .75em;
  background: #119ad4;
  border: 1px solid #0f89bc;
  cursor: pointer;
  font-size: 1.25em;
  font-weight: 300;
  color: #fff;
  text-shadow: 1px 1px 1px #063346;
  letter-spacing: 1px;
  overflow: visible;
  vertical-align: top;
  width: auto;
  white-space: nowrap;
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(89, 196, 242, .5), 0 1px 0 rgba(24, 44, 53, .15);
  text-decoration: none;
  border-radius: 4px;
}

.button:hover,
.form input[type=submit]:hover {
  background: #0f89bc;
  text-decoration: none;
}

.button:active,
.form input[type=submit]:active {
  background: #0d78a5;
  box-shadow: inset rgba(0, 0, 0, .25) 0 1px 2px 0;
  border-color: #063346;
}

.button::-moz-focus-inner,
.form input[type=submit]::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.accordion h3 {
  font-size: 1.25em;
  padding-top: .35em;
  padding-bottom: .175em;
  padding-left: 1em;
  color: #165b65;
  background-color: #dce9ee;
  border-left: 1px solid transparent;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #b5c3c9;
  cursor: pointer;
  -webkit-transition: all .4s;
  transition: all .4s;
  position: relative;
}

.accordion .toggle-active:before,
.accordion h3:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin-right: 1.1em;
  width: .8em;
}

.accordion h3:nth-of-type(even) {
  background-color: #edf4f7;
  border-top-color: #fff;
  border-bottom-color: #d2dbdf;
}

/* blue downward triangle for toggle header */
.accordion h3:after {
  margin-top: 16px;
  height: 8px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpolygon fill='rgb(31,127,142)' points='8,12 0,0 16,0'/%3E%3C/svg%3E") no-repeat;
}

.accordion .toggle-active,
.accordion h3:nth-of-type(even).toggle-active {
  background-color: #79b8d2;
  color: #fff;
  text-shadow: 1px 1px 3px #265c72;
  border-top-color: #fff;
  border-bottom-color: #649cb4;
  font-weight: 300;
}

/* swap blue downward triangle with white upward triangle for active header */ 
.accordion .toggle-active:after {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpolygon fill='rgb(255,255,255)' points='8,0 16,12 0,12'/%3E%3C/svg%3E") no-repeat;
}

.accordion>div {
  max-height: 999px;
  overflow: visible;
  -webkit-transition: max-height .3s;
  transition: max-height .3s;
}

.accordion .closed {
  max-height: 0;
  overflow: hidden;
}

.core .closed {
  display: none;
}

.accordion_inner {
  background-color: #ebf8f9;
}

.contact-list {
  margin: 0;
  padding: .5em 2.5em 1em;
  list-style: none;
}

.contact-list li {
  position: relative;
  margin: 0 0 0 -.75em;
  padding: 0 0 0 1em;
}

.content-contact {
  padding-top: 1em;
}

.content-contact p {
  margin: 0;
  padding: .5em 3em 1.5em;
}

.icon-svg-use {
  position: absolute;
  top: .27em;
  left: -.5em;
  height: 16px;
  width: 16px;
  fill: #3aa5bf;
  background-color: transparent;
  border-color: transparent;
  border-radius: 0;
}

.footer .small a,
.login-remember {
  display: inline-block;
}
            
          
!
            
              /*!
 * domready (c) Dustin Diaz 2014 - License MIT
 * https://github.com/ded/domready/
 */
!function (name, definition) {

  if (typeof module != 'undefined') module.exports = definition()
  else if (typeof define == 'function' && typeof define.amd == 'object') define(definition)
  else this[name] = definition()

}('domready', function () {

  var fns = [], listener
    , doc = document
    , hack = doc.documentElement.doScroll
    , domContentLoaded = 'DOMContentLoaded'
    , loaded = (hack ? /^loaded|^c/ : /^loaded|^i|^c/).test(doc.readyState)


    if (!loaded)
      doc.addEventListener(domContentLoaded, listener = function () {
        doc.removeEventListener(domContentLoaded, listener)
          loaded = 1
          while (listener = fns.shift()) listener()
      })

      return function (fn) {
        loaded ? setTimeout(fn, 0) : fns.push(fn)
      }

});
domready(function () {
  document.documentElement.className += ' domready';
});

/*!
 * Accordion
 * Simple Accordion done in Vanilla JS
 * Example and documentation at: https://github.com/atelierbram/Accordion-Module
 * Licensed under the MIT license: https://www.opensource.org/licenses/mit-license.php
 */

domready(function () {

  var accs = document.querySelectorAll('.js-accordion'), j;
  for (j = 0; j < accs.length; ++j) {

    var h3El = accs[j].querySelectorAll('h3');
    var size = h3El.length, i, h3Node;

    for (i = 0; i < size; i++) {
      h3Node = h3El[i];

      h3Node.setAttribute("class", "toggle");
      h3Node.nextElementSibling.classList.add("closed");

      h3Node.onclick = function () {
        var h3 = this;

        if (h3.getAttribute("class") == "toggle") {
          h3.setAttribute("class", "toggle-active");
          h3.nextElementSibling.classList.remove("closed");
          h3.nextElementSibling.classList.add("opened");
        }
        else {
          h3.setAttribute("class", "toggle");
          h3.nextElementSibling.classList.add("closed");
          h3.nextElementSibling.classList.remove("opened");
        }
      }
    }
  }

});
            
          
!
999px
Loading ..................

Console