Accordion demootje

Developer
Jermaine
Size
14,607 Kb
Views
34,408
  1. Accordion demootje Previews
  2. Accordion demootje HTML Codes
  3. Accordion demootje CSS Codes

How do I make an accordion demootje?

What is a accordion demootje? How do you make a accordion demootje? This script and codes were developed by Jermaine on 26 August 2022, Friday.

Accordion demootje Previews
IQ Test

Accordion demootje - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Accordion demootje</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @charset "UTF-8";
hr { margin: 80px auto; width: 90%;
}
p { margin-top: 1.5em; margin-bottom: 0;
}
p:first-child { margin-top: 0;
}
@keyframes flipdown { 0% { opacity: 0; transform-origin: top center; transform: rotateX(-90deg); } 5% { opacity: 1; } 80% { transform: rotateX(8deg); } 83% { transform: rotateX(6deg); } 92% { transform: rotateX(-3deg); } 100% { transform-origin: top center; transform: rotateX(0deg); }
}
* { box-sizing: border-box;
}
strong { font-weight: bold;
}
/* SETTINGS ETC
*/
/* COLOR PALETTE
*/
/* i know, this ain't 100% black, i refer to KPN's styleguide */
/* FONTS
*/
* { outline: none;
}
body { font-family: "KPN Sans", Arial, Helvetica, Verdana, sans-serif; font-size: 14px; font-weight: 200; line-height: 20px; height: 100%; text-rendering: optimizeLegibility; -ms-text-size-adjust: 100%; /* specifies a size adjustment for displaying text content in IE on Windows phones */ -webkit-font-smoothing: antialiased; /* antialiasing! */ -webkit-text-size-adjust: 100%; /* specifies a size adjustment for displaying text content in Safari on iPhone */ -webkit-touch-callout: none; /* disables the default callout shown when you touch and hold a touch target */ -webkit-overflow-scrolling: touch; /* controls whether or not touch devices use momentum-based scrolling for the given element */ -webkit-text-size-adjust: none;
}
.kpn-form input[type="color"],
.kpn-form input[type="date"],
.kpn-form input[type="datetime"],
.kpn-form input[type="datetime-local"],
.kpn-form input[type="email"],
.kpn-form input[type="month"],
.kpn-form input[type="number"],
.kpn-form input[type="password"],
.kpn-form input[type="search"],
.kpn-form input[type="tel"],
.kpn-form input[type="text"],
.kpn-form input[type="time"],
.kpn-form input[type="url"],
.kpn-form input[type="week"],
.kpn-form textarea { position: relative; font-family: "KPN Sans", Arial, Helvetica, Verdana, sans-serif; font-size: 13px; font-weight: bold; width: 100%; line-height: 20px; padding: 10px; border: 1px solid #b3b3b3; color: #333; box-shadow: inset 2px 2px 3px 0 rgba(51, 51, 51, 0.25); transition: all .25s;
}
.kpn-form input[type="color"]::-webkit-input-placeholder,
.kpn-form input[type="date"]::-webkit-input-placeholder,
.kpn-form input[type="datetime"]::-webkit-input-placeholder,
.kpn-form input[type="datetime-local"]::-webkit-input-placeholder,
.kpn-form input[type="email"]::-webkit-input-placeholder,
.kpn-form input[type="month"]::-webkit-input-placeholder,
.kpn-form input[type="number"]::-webkit-input-placeholder,
.kpn-form input[type="password"]::-webkit-input-placeholder,
.kpn-form input[type="search"]::-webkit-input-placeholder,
.kpn-form input[type="tel"]::-webkit-input-placeholder,
.kpn-form input[type="text"]::-webkit-input-placeholder,
.kpn-form input[type="time"]::-webkit-input-placeholder,
.kpn-form input[type="url"]::-webkit-input-placeholder,
.kpn-form input[type="week"]::-webkit-input-placeholder,
.kpn-form textarea::-webkit-input-placeholder { color: #b3b3b3;
}
.kpn-form input[type="color"]::-moz-placeholder,
.kpn-form input[type="date"]::-moz-placeholder,
.kpn-form input[type="datetime"]::-moz-placeholder,
.kpn-form input[type="datetime-local"]::-moz-placeholder,
.kpn-form input[type="email"]::-moz-placeholder,
.kpn-form input[type="month"]::-moz-placeholder,
.kpn-form input[type="number"]::-moz-placeholder,
.kpn-form input[type="password"]::-moz-placeholder,
.kpn-form input[type="search"]::-moz-placeholder,
.kpn-form input[type="tel"]::-moz-placeholder,
.kpn-form input[type="text"]::-moz-placeholder,
.kpn-form input[type="time"]::-moz-placeholder,
.kpn-form input[type="url"]::-moz-placeholder,
.kpn-form input[type="week"]::-moz-placeholder,
.kpn-form textarea::-moz-placeholder { color: #b3b3b3;
}
.kpn-form input[type="color"]:-moz-placeholder,
.kpn-form input[type="date"]:-moz-placeholder,
.kpn-form input[type="datetime"]:-moz-placeholder,
.kpn-form input[type="datetime-local"]:-moz-placeholder,
.kpn-form input[type="email"]:-moz-placeholder,
.kpn-form input[type="month"]:-moz-placeholder,
.kpn-form input[type="number"]:-moz-placeholder,
.kpn-form input[type="password"]:-moz-placeholder,
.kpn-form input[type="search"]:-moz-placeholder,
.kpn-form input[type="tel"]:-moz-placeholder,
.kpn-form input[type="text"]:-moz-placeholder,
.kpn-form input[type="time"]:-moz-placeholder,
.kpn-form input[type="url"]:-moz-placeholder,
.kpn-form input[type="week"]:-moz-placeholder,
.kpn-form textarea:-moz-placeholder { color: #b3b3b3;
}
.kpn-form input[type="color"]:-ms-input-placeholder,
.kpn-form input[type="date"]:-ms-input-placeholder,
.kpn-form input[type="datetime"]:-ms-input-placeholder,
.kpn-form input[type="datetime-local"]:-ms-input-placeholder,
.kpn-form input[type="email"]:-ms-input-placeholder,
.kpn-form input[type="month"]:-ms-input-placeholder,
.kpn-form input[type="number"]:-ms-input-placeholder,
.kpn-form input[type="password"]:-ms-input-placeholder,
.kpn-form input[type="search"]:-ms-input-placeholder,
.kpn-form input[type="tel"]:-ms-input-placeholder,
.kpn-form input[type="text"]:-ms-input-placeholder,
.kpn-form input[type="time"]:-ms-input-placeholder,
.kpn-form input[type="url"]:-ms-input-placeholder,
.kpn-form input[type="week"]:-ms-input-placeholder,
.kpn-form textarea:-ms-input-placeholder { color: #b3b3b3;
}
.kpn-form input[type="color"]:focus,
.kpn-form input[type="date"]:focus,
.kpn-form input[type="datetime"]:focus,
.kpn-form input[type="datetime-local"]:focus,
.kpn-form input[type="email"]:focus,
.kpn-form input[type="month"]:focus,
.kpn-form input[type="number"]:focus,
.kpn-form input[type="password"]:focus,
.kpn-form input[type="search"]:focus,
.kpn-form input[type="tel"]:focus,
.kpn-form input[type="text"]:focus,
.kpn-form input[type="time"]:focus,
.kpn-form input[type="url"]:focus,
.kpn-form input[type="week"]:focus,
.kpn-form textarea:focus { border-color: #09f;
}
.kpn-form input[type="color"]:disabled,
.kpn-form input[type="date"]:disabled,
.kpn-form input[type="datetime"]:disabled,
.kpn-form input[type="datetime-local"]:disabled,
.kpn-form input[type="email"]:disabled,
.kpn-form input[type="month"]:disabled,
.kpn-form input[type="number"]:disabled,
.kpn-form input[type="password"]:disabled,
.kpn-form input[type="search"]:disabled,
.kpn-form input[type="tel"]:disabled,
.kpn-form input[type="text"]:disabled,
.kpn-form input[type="time"]:disabled,
.kpn-form input[type="url"]:disabled,
.kpn-form input[type="week"]:disabled,
.kpn-form textarea:disabled { cursor: not-allowed;
}
.kpn-form input[type="color"].size-large,
.kpn-form input[type="date"].size-large,
.kpn-form input[type="datetime"].size-large,
.kpn-form input[type="datetime-local"].size-large,
.kpn-form input[type="email"].size-large,
.kpn-form input[type="month"].size-large,
.kpn-form input[type="number"].size-large,
.kpn-form input[type="password"].size-large,
.kpn-form input[type="search"].size-large,
.kpn-form input[type="tel"].size-large,
.kpn-form input[type="text"].size-large,
.kpn-form input[type="time"].size-large,
.kpn-form input[type="url"].size-large,
.kpn-form input[type="week"].size-large,
.kpn-form textarea.size-large { padding: 15px;
}
.kpn-form input[type="color"].has-error,
.kpn-form input[type="date"].has-error,
.kpn-form input[type="datetime"].has-error,
.kpn-form input[type="datetime-local"].has-error,
.kpn-form input[type="email"].has-error,
.kpn-form input[type="month"].has-error,
.kpn-form input[type="number"].has-error,
.kpn-form input[type="password"].has-error,
.kpn-form input[type="search"].has-error,
.kpn-form input[type="tel"].has-error,
.kpn-form input[type="text"].has-error,
.kpn-form input[type="time"].has-error,
.kpn-form input[type="url"].has-error,
.kpn-form input[type="week"].has-error,
.kpn-form textarea.has-error { border-color: #f33;
}
.kpn-form input[type="color"].is-mobilephonenumber:before,
.kpn-form input[type="date"].is-mobilephonenumber:before,
.kpn-form input[type="datetime"].is-mobilephonenumber:before,
.kpn-form input[type="datetime-local"].is-mobilephonenumber:before,
.kpn-form input[type="email"].is-mobilephonenumber:before,
.kpn-form input[type="month"].is-mobilephonenumber:before,
.kpn-form input[type="number"].is-mobilephonenumber:before,
.kpn-form input[type="password"].is-mobilephonenumber:before,
.kpn-form input[type="search"].is-mobilephonenumber:before,
.kpn-form input[type="tel"].is-mobilephonenumber:before,
.kpn-form input[type="text"].is-mobilephonenumber:before,
.kpn-form input[type="time"].is-mobilephonenumber:before,
.kpn-form input[type="url"].is-mobilephonenumber:before,
.kpn-form input[type="week"].is-mobilephonenumber:before,
.kpn-form textarea.is-mobilephonenumber:before { content: "06"; display: block; position: absolute; top: 0; left: 0; width: 30px; height: 30px; line-height: 30px; background: yellow; font-size: 13px;
}
.kpn-form textarea { resize: vertical;
}
.kpn-form input[type="radio"] { position: relative; left: -3px; background-color: transparent; border: 1px solid #333; border-radius: 50%; box-shadow: inset 0 0 0 0 #fff; cursor: pointer; font: inherit; height: 16px; width: 16px; -ms-appearance: none; -moz-appearance: none; -webkit-appearance: none;
}
.kpn-form input[type="radio"]:not(:checked), .kpn-form input[type="radio"]:checked { box-shadow: inset 0 0 0 2px #fff; transition: background .25s, box-shadow .1s;
}
.kpn-form input[type="radio"]:not(:checked) + label, .kpn-form input[type="radio"]:checked + label { display: block; position: relative; margin-top: -25px; padding-left: 26px; cursor: pointer;
}
.kpn-form input[type="radio"]:checked { background-color: #070;
}
.kpn-form input[type="radio"]:disabled { border-color: #b3b3b3; cursor: not-allowed;
}
.kpn-form input[type="radio"]:disabled:checked { background-color: #e3e3e3;
}
.kpn-form input[type="radio"]:disabled + label { color: #b3b3b3; cursor: default;
}
.kpn-form input[type="checkbox"] { position: relative; left: -3px; height: 16px; width: 16px; background-color: transparent; border: 1px solid #333; border-radius: 3px; cursor: pointer; -ms-appearance: none; -moz-appearance: none; -webkit-appearance: none;
}
.kpn-form input[type="checkbox"]:not(:checked), .kpn-form input[type="checkbox"]:checked { transition: background .25s, box-shadow .1s;
}
.kpn-form input[type="checkbox"]:not(:checked) + label, .kpn-form input[type="checkbox"]:checked + label { display: block; position: relative; margin-top: -25px; padding-left: 26px; cursor: pointer;
}
.kpn-form input[type="checkbox"]:checked { background-color: #070;
}
.kpn-form input[type="checkbox"]:checked:after { content: "✔"; position: absolute; top: 0; left: 2px; font-size: 12px; color: #fff; transition: all .25s;
}
.kpn-form input[type="checkbox"]:disabled { border-color: #b3b3b3; cursor: not-allowed;
}
.kpn-form input[type="checkbox"]:disabled:checked { background-color: #e3e3e3;
}
.kpn-form input[type="checkbox"]:disabled + label { color: #b3b3b3; cursor: default;
}
.kpn-form span + input[type="checkbox"] { color: blue; font-weight: bold;
}
.kpn-form input[type="checkbox"] + span { color: green; font-weight: bold;
}
.kpn-form p + h1 { color: blue;
}
.kpn-form .kpn-toggle { display: none;
}
.kpn-form .kpn-toggle ~ label { color: red; border: 1px solid red;
}
.kpn-form .kpn-toggle + label { display: block; position: relative; background-color: #f3f3f3; border: 1px solid #e3e3e3; border-radius: 15px; padding: 2px !important; transition: all .4s ease; width: 60px; height: 30px; cursor: pointer; user-select: none;
}
.kpn-form .kpn-toggle + label:after, .kpn-form .kpn-toggle + label:before { display: block; content: ""; position: relative; width: 24px; height: 24px;
}
.kpn-form .kpn-toggle + label:before { content: "uit"; color: #333; left: 32px; top: 2px; font-size: 12px; font-weight: bold;
}
.kpn-form .kpn-toggle + label:after { left: 0; top: -24px; border-radius: 50%; background: #fff; transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease; box-shadow: 0 0 0 1px rgba(51, 51, 51, 0.1), 0 4px 0 rgba(51, 51, 51, 0.08);
}
.kpn-form .kpn-toggle + label:active:after { padding-right: 12px;
}
.kpn-form .kpn-toggle:checked + label { background-color: #090; padding-left: 0;
}
.kpn-form .kpn-toggle:checked + label:before { content: "aan"; color: #fff; left: 4px; top: 2px;
}
.kpn-form .kpn-toggle:checked + label:after { left: 30px; top: -24px;
}
.kpn-form .kpn-toggle:checked + label:active { box-shadow: none;
}
.kpn-form .kpn-toggle:checked + label:active:after { margin-left: -12px;
}
.kpn-form label,
.kpn-form select,
.kpn-form option,
.kpn-form button,
.kpn-form input[type="submit"],
.kpn-form input[type="reset"] { cursor: pointer;
}
.kpn-form label + input[type="color"],
.kpn-form label + input[type="date"],
.kpn-form label + input[type="datetime"],
.kpn-form label + input[type="datetime-local"],
.kpn-form label + input[type="email"],
.kpn-form label + input[type="month"],
.kpn-form label + input[type="number"],
.kpn-form label + input[type="password"],
.kpn-form label + input[type="search"],
.kpn-form label + input[type="tel"],
.kpn-form label + input[type="text"],
.kpn-form label + input[type="time"],
.kpn-form label + input[type="url"],
.kpn-form label + input[type="week"],
.kpn-form label + textarea { display: block; font-weight: bold; color: red;
}
.kpn-form label + input[type="color"]:disabled,
.kpn-form label + input[type="date"]:disabled,
.kpn-form label + input[type="datetime"]:disabled,
.kpn-form label + input[type="datetime-local"]:disabled,
.kpn-form label + input[type="email"]:disabled,
.kpn-form label + input[type="month"]:disabled,
.kpn-form label + input[type="number"]:disabled,
.kpn-form label + input[type="password"]:disabled,
.kpn-form label + input[type="search"]:disabled,
.kpn-form label + input[type="tel"]:disabled,
.kpn-form label + input[type="text"]:disabled,
.kpn-form label + input[type="time"]:disabled,
.kpn-form label + input[type="url"]:disabled,
.kpn-form label + input[type="week"]:disabled,
.kpn-form label + textarea:disabled { cursor: not-allowed;
}
.kpn-form fieldset { border: 0; margin: 0 0 20px 0; padding: 0;
}
.kpn-form fieldset legend { font-size: 20px;
}
.kpn-form fieldset > p { margin: 0 0 20px 0;
}
.kpn-form fieldset > p:last-of-type { margin-bottom: 0;
}
.kpn-form p input { margin-top: 0;
}
input[type="submit"],
button,
.kpn-btn { /* styles below are aiming on the primary button specified in the styling guidelines doc, if you want a secondary type, append .type-secondary. make sure you ALWAYS append a size to your buttons... */ display: inline-block; background-color: #09f; color: #fff; border-radius: 3px; border: 1px solid #fff; font-family: "KPN Accent", Arial, Helvetica, Verdana, sans-serif; margin: 20px 0 20px 20px; cursor: pointer; transition: all .25s;
}
input[type="submit"]:first-of-type,
button:first-of-type,
.kpn-btn:first-of-type { margin-left: 0;
}
input[type="submit"]:hover,
button:hover,
.kpn-btn:hover { background-color: #0d76bc;
}
input[type="submit"]:disabled.size-small, input[type="submit"]:disabled.size-medium, input[type="submit"]:disabled.size-large,
button:disabled.size-small,
button:disabled.size-medium,
button:disabled.size-large,
.kpn-btn:disabled.size-small,
.kpn-btn:disabled.size-medium,
.kpn-btn:disabled.size-large { cursor: not-allowed;
}
input[type="submit"]:disabled.size-small:hover, input[type="submit"]:disabled.size-medium:hover, input[type="submit"]:disabled.size-large:hover,
button:disabled.size-small:hover,
button:disabled.size-medium:hover,
button:disabled.size-large:hover,
.kpn-btn:disabled.size-small:hover,
.kpn-btn:disabled.size-medium:hover,
.kpn-btn:disabled.size-large:hover { background-color: #09f; box-shadow: none;
}
input[type="submit"].size-small,
button.size-small,
.kpn-btn.size-small { padding: 9px 20px; font-family: "KPN Sans", Arial, Helvetica, Verdana, sans-serif; font-size: 13px;
}
input[type="submit"].size-medium,
button.size-medium,
.kpn-btn.size-medium { padding: 12px 30px; font-size: 16px;
}
input[type="submit"].size-large,
button.size-large,
.kpn-btn.size-large { padding: 20px 30px; font-size: 20px; font-weight: 200;
}
input[type="submit"].size-large.has-icon,
button.size-large.has-icon,
.kpn-btn.size-large.has-icon { padding-left: 80px; background-size: 35px; background-repeat: no-repeat; background-position: 30px 50%;
}
input[type="submit"].state-inactive,
button.state-inactive,
.kpn-btn.state-inactive { color: #fff; border-color: #d3d3d3; cursor: pointer;
}
input[type="submit"].type-secondary,
button.type-secondary,
.kpn-btn.type-secondary { color: #09f; border-color: #09f; background-color: #fff;
}
input[type="submit"].type-secondary:disabled.size-small, input[type="submit"].type-secondary:disabled.size-medium, input[type="submit"].type-secondary:disabled.size-large,
button.type-secondary:disabled.size-small,
button.type-secondary:disabled.size-medium,
button.type-secondary:disabled.size-large,
.kpn-btn.type-secondary:disabled.size-small,
.kpn-btn.type-secondary:disabled.size-medium,
.kpn-btn.type-secondary:disabled.size-large { cursor: not-allowed;
}
input[type="submit"].type-secondary:disabled.size-small:hover, input[type="submit"].type-secondary:disabled.size-medium:hover, input[type="submit"].type-secondary:disabled.size-large:hover,
button.type-secondary:disabled.size-small:hover,
button.type-secondary:disabled.size-medium:hover,
button.type-secondary:disabled.size-large:hover,
.kpn-btn.type-secondary:disabled.size-small:hover,
.kpn-btn.type-secondary:disabled.size-medium:hover,
.kpn-btn.type-secondary:disabled.size-large:hover { box-shadow: none; background-color: #fff;
}
input[type="submit"].type-secondary.size-small:hover,
button.type-secondary.size-small:hover,
.kpn-btn.type-secondary.size-small:hover { box-shadow: 0 0 5px 1px rgba(171, 213, 243, 0.95);
}
input[type="submit"].type-secondary.size-medium:hover,
button.type-secondary.size-medium:hover,
.kpn-btn.type-secondary.size-medium:hover { box-shadow: 0 0 7px 1px rgba(171, 213, 243, 0.95);
}
input[type="submit"].type-secondary.size-large:hover,
button.type-secondary.size-large:hover,
.kpn-btn.type-secondary.size-large:hover { box-shadow: 0 0 9px 1px rgba(171, 213, 243, 0.95);
}
input[type="submit"].type-secondary.state-inactive,
button.type-secondary.state-inactive,
.kpn-btn.type-secondary.state-inactive { color: #b3b3b3; border-color: #d3d3d3;
}
input[type="submit"]::-webkit-input-placeholder,
button::-webkit-input-placeholder,
.kpn-btn::-webkit-input-placeholder { color: #f33;
}
input[type="submit"]::-moz-placeholder,
button::-moz-placeholder,
.kpn-btn::-moz-placeholder { color: #f33;
}
input[type="submit"]:-moz-placeholder,
button:-moz-placeholder,
.kpn-btn:-moz-placeholder { color: #f33;
}
input[type="submit"]:-ms-input-placeholder,
button:-ms-input-placeholder,
.kpn-btn:-ms-input-placeholder { color: #f33;
}
input[type="color"] + label,
input[type="date"] + label,
input[type="datetime"] + label,
input[type="datetime-local"] + label,
input[type="email"] + label,
input[type="month"] + label,
input[type="number"] + label,
input[type="password"] + label,
input[type="search"] + label,
input[type="tel"] + label,
input[type="text"] + label,
input[type="time"] + label,
input[type="url"] + label,
input[type="week"] + label,
input[type="checkbox"] + label,
textarea + label { display: block; font-weight: bold; color: red;
}
.kpn-accordion { list-style: none; perspective: 900; padding: 0; margin: 30px 0 0 0; border-bottom: 1px solid #d3d3d3;
}
.kpn-accordion li { position: relative; margin: 0; padding: 0; border-top: 1px solid #d3d3d3; animation: flipdown .25s ease both;
}
.kpn-accordion li:nth-of-type(1) { animation-delay: .125s;
}
.kpn-accordion li:nth-of-type(2) { animation-delay: .25s;
}
.kpn-accordion li:nth-of-type(3) { animation-delay: .375s;
}
.kpn-accordion li:nth-of-type(4) { animation-delay: .5s;
}
.kpn-accordion li:nth-of-type(5) { animation-delay: .625s;
}
.kpn-accordion li:nth-of-type(6) { animation-delay: .75s;
}
.kpn-accordion li:nth-of-type(7) { animation-delay: .875s;
}
.kpn-accordion li:nth-of-type(8) { animation-delay: 1s;
}
.kpn-accordion li:last-of-type { padding-bottom: 0;
}
.kpn-accordion li h3 { font-family: "KPN Sans", Arial, Helvetica, Verdana, sans-serif; font-size: 16px; font-weight: bold; margin-left: 20px; width: calc(100% - 30px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpn-accordion li h3:hover { color: #09f;
}
.kpn-accordion li h3:hover ~ i { color: #09f;
}
.kpn-accordion li i { position: absolute; top: 20px; right: 10px; transform: translate(-6px, 0);
}
.kpn-accordion li i:before, .kpn-accordion li i:after { content: ""; transition: all .25s ease-in-out; position: absolute; background-color: #333; width: 1px; height: 9px;
}
.kpn-accordion li i:before { transform: translate(4px, 0) rotate(45deg);
}
.kpn-accordion li i:after { transform: translate(-2px, 0) rotate(-45deg);
}
.kpn-accordion li input[type="radio"] { position: absolute; cursor: pointer; width: 100%; height: 100%; z-index: 1; opacity: 0;
}
.kpn-accordion li input[type="radio"]:checked ~ p { opacity: 1; transform: translate(0, 0); margin-top: 1em; max-height: 800px;
}
.kpn-accordion li input[type="radio"]:checked ~ p:last-child { margin-bottom: 1em;
}
.kpn-accordion li input[type="radio"]:checked ~ i:before, .kpn-accordion li input[type="radio"]:checked ~ i:after { background-color: #090;
}
.kpn-accordion li input[type="radio"]:checked ~ i:before { transform: translate(-4px, 0) rotate(45deg);
}
.kpn-accordion li input[type="radio"]:checked ~ i:after { transform: translate(2px, 0) rotate(-45deg);
}
.kpn-accordion li input[type="radio"]:checked ~ h3, .kpn-accordion li input[type="radio"]:checked:hover .kpn-accordion li input[type="radio"]:checked ~ h3 { color: #090;
}
.kpn-accordion li input[type="radio"]:checked p { margin-top: 1.5em; margin-bottom: 0;
}
.kpn-accordion li input[type="radio"]:checked p:first-child { margin-top: 0;
}
.kpn-accordion li input[type="radio"]:hover ~ h3 { color: #09f;
}
.kpn-accordion li input[type="radio"]:hover ~ i:before, .kpn-accordion li input[type="radio"]:hover ~ i:after { background-color: #09f;
}
.kpn-accordion p { position: relative; z-index: 2; overflow: hidden; width: calc(100% - 40px); margin: 0 0 0 20px; max-height: 0; opacity: 0; transition: all .25s ease-in-out; transform: translate(0, 50%);
}
@media (min-width: 768px) { .kpn-accordion li h3 { margin-left: 0; } .kpn-accordion p { margin-left: 0; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <br><br><br><br><br><br>
<form class="kpn-form">	<p>	<span>Labeltje ervoor</span><input type="checkbox" class="kpn-toggle" id="toggle01"> <label for="toggle01"></label>	</p>	<h1>hoi</h1>	<p>paragraafje</p>
</form>
<br><br><br><br>
<div class="kpn-alert type-ok">	<p>	We hebben je instellingen succesvol ontvangen en verwerkt in ons systeem	</p>
</div>
<div class="kpn-alert type-error">	<p>	Op dit moment is er een storing. Excuses voor het ongemak.	<br>	Nieuwe regel.	</p>
</div>
<div class="kpn-alert type-warning">	<p>	Je <a href="#">betaalgegevens</a> worden op dit moment gevalideerd, dit kan even duren	</p>
</div>
<hr>
<ul class="kpn-accordion"> <li> <input type="radio" name="accordion_01" value="item_01"> <i></i> <h3>Draadloze verbindingsset</h3> <p>	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sem id arcu ullamcorper imperdiet in lobortis enim.	</p>	<p>	Nunc non ornare diam. Mauris ac justo sit amet neque gravida venenatis quis nec nulla. Proin eget purus at elit ornare aliquam. Ut rhoncus libero sit amet ex pharetra accumsan. Donec a magna non ipsum tempor sodales. Praesent ligula est, dignissim eu lacus ac, sollicitudin suscipit odio. Aenean vel massa vel sapien rutrum tempus. Proin gravida dapibus mi. Fusce quis est et urna volutpat gravida. Fusce venenatis, orci sit amet pharetra lacinia, ante est mollis leo, vel laoreet nunc massa pretium sem. Donec quis rhoncus mi.	</p> </li> <li> <input type="radio" name="accordion_01" value="item_02"> <i></i> <h3>Veilig internetten</h3> <p>	Sed ornare enim ut massa posuere consectetur. Integer in mauris et enim imperdiet gravida at a nibh.	</p> </li> <li> <input type="radio" name="accordion_01" value="item_03"> <i></i> <h3>Digitenne &amp; Interactieve TV</h3> <p>	Morbi tempor risus sem, sit amet tincidunt eros dictum ut. Integer non pharetra tortor.	</p> </li> <li> <input type="radio" name="accordion_01" value="item_04"> <i></i> <h3>Monteur</h3> <p>	Morbi tempor risus sem, sit amet tincidunt eros dictum ut. Integer non pharetra tortor.	</p> </li> <li> <input type="radio" name="accordion_01" value="item_05"> <i></i> <h3>Toestel &amp; abonnement</h3> <p>	Morbi tempor risus sem, sit amet tincidunt eros dictum ut. Integer non pharetra tortor.	</p> </li> <li> <input type="radio" name="accordion_01" value="item_03"> <i></i> <h3>Alles-in-1 pakket</h3> <p>	Morbi tempor risus sem, sit amet tincidunt eros dictum ut. Integer non pharetra tortor.	</p> </li> <li> <input type="radio" name="accordion_01" value="item_03"> <i></i> <h3>Streamen met Spotify Premium lange titel Lorem Ipsum blablablablablablablabla</h3> <p>	Morbi tempor risus sem, sit amet tincidunt eros dictum ut. Integer non pharetra tortor.	</p> </li> <li> <input type="radio" name="accordion_01" value="item_03"> <i></i> <h3>Digitenne &amp; Interactieve TV</h3> <p>	Morbi tempor risus sem, sit amet tincidunt eros dictum ut. Integer non pharetra tortor.	</p> </li>
</ul>
<hr>
<form class="kpn-form">	<p>	<strong>Bold text</strong>	</p>	<fieldset>	<legend>Input</legend>	<p>	<label for="input01">Naam</label>	<input type="text" placeholder="Naam" id="input01">	</p>	<p>	<label>E-mailadres</label>	<input type="email" placeholder="E-mailadres" class="size-large has-error" disabled>	</p>	<p>	<input type="submit" class="kpn-btn size-small" value="Verzenden">	<input type="reset" class="kpn-btn size-small type-secondary" value="Opnieuw">	<input type="reset" class="kpn-btn size-small" value="Disabled primary" disabled>	<input type="reset" class="kpn-btn size-small type-secondary" value="Disabled secondary" disabled>	</p>	<p>	<label>Mobiel telefoonnummer</label>	<input type="text" placeholder="" class="is-mobilephonenumber">	</p>	</fieldset>	<fieldset>	<legend>Radiobuttons</legend>	<p>	<input type="radio" name="group" id="cb01">	<label for="cb01">	<strong>Optie 1</strong>	<br>	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id justo nisi. Nullam blandit aliquam diam et semper.	</label>	</p>	<p>	<input type="radio" name="group" id="cb02" checked> <label for="cb02">lalala</a>	</p>	<p>	<input type="radio" name="group2" id="cb03" checked disabled>	<label for="cb03">	<strong>Optie 1</strong>	<br>	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id justo nisi. Nullam blandit aliquam diam et semper.	</label>	</p>	<p>	<input type="radio" name="group2" id="cb4" disabled> <label for="cb04">lalala</a>	</p>	</fieldset>	<fieldset>	<legend>Checkboxjes</legend>	<p>	<input type="checkbox" name="groupcheck" id="rb01">	<label for="rb01">	<strong>Optie 1</strong>	<br>	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id justo nisi.<br>Nullam blandit aliquam diam et semper.et nunc ac efficitur hendrerit.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id justo nisi.<br>Nullam blandit aliquam diam et semper.et nunc ac efficitur hendrerit.	</label>	</p>	<p>	<input type="checkbox" name="groupcheck" id="rb02" checked>	<label for="rb02">lalala</a>	</p>	<p>	<input type="checkbox" name="groupcheck2" id="rb03" checked disabled>	<label for="rb03">lalala</a>	</p>	<p>	<input type="checkbox" name="groupcheck2" id="rb04" disabled>	<label for="rb04">lalala</a>	</p>	</fieldset>
</form>
<hr>
</body>
</html>

Accordion demootje - Script Codes CSS Codes

@charset "UTF-8";
hr { margin: 80px auto; width: 90%;
}
p { margin-top: 1.5em; margin-bottom: 0;
}
p:first-child { margin-top: 0;
}
@keyframes flipdown { 0% { opacity: 0; transform-origin: top center; transform: rotateX(-90deg); } 5% { opacity: 1; } 80% { transform: rotateX(8deg); } 83% { transform: rotateX(6deg); } 92% { transform: rotateX(-3deg); } 100% { transform-origin: top center; transform: rotateX(0deg); }
}
* { box-sizing: border-box;
}
strong { font-weight: bold;
}
/* SETTINGS ETC
*/
/* COLOR PALETTE
*/
/* i know, this ain't 100% black, i refer to KPN's styleguide */
/* FONTS
*/
* { outline: none;
}
body { font-family: "KPN Sans", Arial, Helvetica, Verdana, sans-serif; font-size: 14px; font-weight: 200; line-height: 20px; height: 100%; text-rendering: optimizeLegibility; -ms-text-size-adjust: 100%; /* specifies a size adjustment for displaying text content in IE on Windows phones */ -webkit-font-smoothing: antialiased; /* antialiasing! */ -webkit-text-size-adjust: 100%; /* specifies a size adjustment for displaying text content in Safari on iPhone */ -webkit-touch-callout: none; /* disables the default callout shown when you touch and hold a touch target */ -webkit-overflow-scrolling: touch; /* controls whether or not touch devices use momentum-based scrolling for the given element */ -webkit-text-size-adjust: none;
}
.kpn-form input[type="color"],
.kpn-form input[type="date"],
.kpn-form input[type="datetime"],
.kpn-form input[type="datetime-local"],
.kpn-form input[type="email"],
.kpn-form input[type="month"],
.kpn-form input[type="number"],
.kpn-form input[type="password"],
.kpn-form input[type="search"],
.kpn-form input[type="tel"],
.kpn-form input[type="text"],
.kpn-form input[type="time"],
.kpn-form input[type="url"],
.kpn-form input[type="week"],
.kpn-form textarea { position: relative; font-family: "KPN Sans", Arial, Helvetica, Verdana, sans-serif; font-size: 13px; font-weight: bold; width: 100%; line-height: 20px; padding: 10px; border: 1px solid #b3b3b3; color: #333; box-shadow: inset 2px 2px 3px 0 rgba(51, 51, 51, 0.25); transition: all .25s;
}
.kpn-form input[type="color"]::-webkit-input-placeholder,
.kpn-form input[type="date"]::-webkit-input-placeholder,
.kpn-form input[type="datetime"]::-webkit-input-placeholder,
.kpn-form input[type="datetime-local"]::-webkit-input-placeholder,
.kpn-form input[type="email"]::-webkit-input-placeholder,
.kpn-form input[type="month"]::-webkit-input-placeholder,
.kpn-form input[type="number"]::-webkit-input-placeholder,
.kpn-form input[type="password"]::-webkit-input-placeholder,
.kpn-form input[type="search"]::-webkit-input-placeholder,
.kpn-form input[type="tel"]::-webkit-input-placeholder,
.kpn-form input[type="text"]::-webkit-input-placeholder,
.kpn-form input[type="time"]::-webkit-input-placeholder,
.kpn-form input[type="url"]::-webkit-input-placeholder,
.kpn-form input[type="week"]::-webkit-input-placeholder,
.kpn-form textarea::-webkit-input-placeholder { color: #b3b3b3;
}
.kpn-form input[type="color"]::-moz-placeholder,
.kpn-form input[type="date"]::-moz-placeholder,
.kpn-form input[type="datetime"]::-moz-placeholder,
.kpn-form input[type="datetime-local"]::-moz-placeholder,
.kpn-form input[type="email"]::-moz-placeholder,
.kpn-form input[type="month"]::-moz-placeholder,
.kpn-form input[type="number"]::-moz-placeholder,
.kpn-form input[type="password"]::-moz-placeholder,
.kpn-form input[type="search"]::-moz-placeholder,
.kpn-form input[type="tel"]::-moz-placeholder,
.kpn-form input[type="text"]::-moz-placeholder,
.kpn-form input[type="time"]::-moz-placeholder,
.kpn-form input[type="url"]::-moz-placeholder,
.kpn-form input[type="week"]::-moz-placeholder,
.kpn-form textarea::-moz-placeholder { color: #b3b3b3;
}
.kpn-form input[type="color"]:-moz-placeholder,
.kpn-form input[type="date"]:-moz-placeholder,
.kpn-form input[type="datetime"]:-moz-placeholder,
.kpn-form input[type="datetime-local"]:-moz-placeholder,
.kpn-form input[type="email"]:-moz-placeholder,
.kpn-form input[type="month"]:-moz-placeholder,
.kpn-form input[type="number"]:-moz-placeholder,
.kpn-form input[type="password"]:-moz-placeholder,
.kpn-form input[type="search"]:-moz-placeholder,
.kpn-form input[type="tel"]:-moz-placeholder,
.kpn-form input[type="text"]:-moz-placeholder,
.kpn-form input[type="time"]:-moz-placeholder,
.kpn-form input[type="url"]:-moz-placeholder,
.kpn-form input[type="week"]:-moz-placeholder,
.kpn-form textarea:-moz-placeholder { color: #b3b3b3;
}
.kpn-form input[type="color"]:-ms-input-placeholder,
.kpn-form input[type="date"]:-ms-input-placeholder,
.kpn-form input[type="datetime"]:-ms-input-placeholder,
.kpn-form input[type="datetime-local"]:-ms-input-placeholder,
.kpn-form input[type="email"]:-ms-input-placeholder,
.kpn-form input[type="month"]:-ms-input-placeholder,
.kpn-form input[type="number"]:-ms-input-placeholder,
.kpn-form input[type="password"]:-ms-input-placeholder,
.kpn-form input[type="search"]:-ms-input-placeholder,
.kpn-form input[type="tel"]:-ms-input-placeholder,
.kpn-form input[type="text"]:-ms-input-placeholder,
.kpn-form input[type="time"]:-ms-input-placeholder,
.kpn-form input[type="url"]:-ms-input-placeholder,
.kpn-form input[type="week"]:-ms-input-placeholder,
.kpn-form textarea:-ms-input-placeholder { color: #b3b3b3;
}
.kpn-form input[type="color"]:focus,
.kpn-form input[type="date"]:focus,
.kpn-form input[type="datetime"]:focus,
.kpn-form input[type="datetime-local"]:focus,
.kpn-form input[type="email"]:focus,
.kpn-form input[type="month"]:focus,
.kpn-form input[type="number"]:focus,
.kpn-form input[type="password"]:focus,
.kpn-form input[type="search"]:focus,
.kpn-form input[type="tel"]:focus,
.kpn-form input[type="text"]:focus,
.kpn-form input[type="time"]:focus,
.kpn-form input[type="url"]:focus,
.kpn-form input[type="week"]:focus,
.kpn-form textarea:focus { border-color: #09f;
}
.kpn-form input[type="color"]:disabled,
.kpn-form input[type="date"]:disabled,
.kpn-form input[type="datetime"]:disabled,
.kpn-form input[type="datetime-local"]:disabled,
.kpn-form input[type="email"]:disabled,
.kpn-form input[type="month"]:disabled,
.kpn-form input[type="number"]:disabled,
.kpn-form input[type="password"]:disabled,
.kpn-form input[type="search"]:disabled,
.kpn-form input[type="tel"]:disabled,
.kpn-form input[type="text"]:disabled,
.kpn-form input[type="time"]:disabled,
.kpn-form input[type="url"]:disabled,
.kpn-form input[type="week"]:disabled,
.kpn-form textarea:disabled { cursor: not-allowed;
}
.kpn-form input[type="color"].size-large,
.kpn-form input[type="date"].size-large,
.kpn-form input[type="datetime"].size-large,
.kpn-form input[type="datetime-local"].size-large,
.kpn-form input[type="email"].size-large,
.kpn-form input[type="month"].size-large,
.kpn-form input[type="number"].size-large,
.kpn-form input[type="password"].size-large,
.kpn-form input[type="search"].size-large,
.kpn-form input[type="tel"].size-large,
.kpn-form input[type="text"].size-large,
.kpn-form input[type="time"].size-large,
.kpn-form input[type="url"].size-large,
.kpn-form input[type="week"].size-large,
.kpn-form textarea.size-large { padding: 15px;
}
.kpn-form input[type="color"].has-error,
.kpn-form input[type="date"].has-error,
.kpn-form input[type="datetime"].has-error,
.kpn-form input[type="datetime-local"].has-error,
.kpn-form input[type="email"].has-error,
.kpn-form input[type="month"].has-error,
.kpn-form input[type="number"].has-error,
.kpn-form input[type="password"].has-error,
.kpn-form input[type="search"].has-error,
.kpn-form input[type="tel"].has-error,
.kpn-form input[type="text"].has-error,
.kpn-form input[type="time"].has-error,
.kpn-form input[type="url"].has-error,
.kpn-form input[type="week"].has-error,
.kpn-form textarea.has-error { border-color: #f33;
}
.kpn-form input[type="color"].is-mobilephonenumber:before,
.kpn-form input[type="date"].is-mobilephonenumber:before,
.kpn-form input[type="datetime"].is-mobilephonenumber:before,
.kpn-form input[type="datetime-local"].is-mobilephonenumber:before,
.kpn-form input[type="email"].is-mobilephonenumber:before,
.kpn-form input[type="month"].is-mobilephonenumber:before,
.kpn-form input[type="number"].is-mobilephonenumber:before,
.kpn-form input[type="password"].is-mobilephonenumber:before,
.kpn-form input[type="search"].is-mobilephonenumber:before,
.kpn-form input[type="tel"].is-mobilephonenumber:before,
.kpn-form input[type="text"].is-mobilephonenumber:before,
.kpn-form input[type="time"].is-mobilephonenumber:before,
.kpn-form input[type="url"].is-mobilephonenumber:before,
.kpn-form input[type="week"].is-mobilephonenumber:before,
.kpn-form textarea.is-mobilephonenumber:before { content: "06"; display: block; position: absolute; top: 0; left: 0; width: 30px; height: 30px; line-height: 30px; background: yellow; font-size: 13px;
}
.kpn-form textarea { resize: vertical;
}
.kpn-form input[type="radio"] { position: relative; left: -3px; background-color: transparent; border: 1px solid #333; border-radius: 50%; box-shadow: inset 0 0 0 0 #fff; cursor: pointer; font: inherit; height: 16px; width: 16px; -ms-appearance: none; -moz-appearance: none; -webkit-appearance: none;
}
.kpn-form input[type="radio"]:not(:checked), .kpn-form input[type="radio"]:checked { box-shadow: inset 0 0 0 2px #fff; transition: background .25s, box-shadow .1s;
}
.kpn-form input[type="radio"]:not(:checked) + label, .kpn-form input[type="radio"]:checked + label { display: block; position: relative; margin-top: -25px; padding-left: 26px; cursor: pointer;
}
.kpn-form input[type="radio"]:checked { background-color: #070;
}
.kpn-form input[type="radio"]:disabled { border-color: #b3b3b3; cursor: not-allowed;
}
.kpn-form input[type="radio"]:disabled:checked { background-color: #e3e3e3;
}
.kpn-form input[type="radio"]:disabled + label { color: #b3b3b3; cursor: default;
}
.kpn-form input[type="checkbox"] { position: relative; left: -3px; height: 16px; width: 16px; background-color: transparent; border: 1px solid #333; border-radius: 3px; cursor: pointer; -ms-appearance: none; -moz-appearance: none; -webkit-appearance: none;
}
.kpn-form input[type="checkbox"]:not(:checked), .kpn-form input[type="checkbox"]:checked { transition: background .25s, box-shadow .1s;
}
.kpn-form input[type="checkbox"]:not(:checked) + label, .kpn-form input[type="checkbox"]:checked + label { display: block; position: relative; margin-top: -25px; padding-left: 26px; cursor: pointer;
}
.kpn-form input[type="checkbox"]:checked { background-color: #070;
}
.kpn-form input[type="checkbox"]:checked:after { content: "✔"; position: absolute; top: 0; left: 2px; font-size: 12px; color: #fff; transition: all .25s;
}
.kpn-form input[type="checkbox"]:disabled { border-color: #b3b3b3; cursor: not-allowed;
}
.kpn-form input[type="checkbox"]:disabled:checked { background-color: #e3e3e3;
}
.kpn-form input[type="checkbox"]:disabled + label { color: #b3b3b3; cursor: default;
}
.kpn-form span + input[type="checkbox"] { color: blue; font-weight: bold;
}
.kpn-form input[type="checkbox"] + span { color: green; font-weight: bold;
}
.kpn-form p + h1 { color: blue;
}
.kpn-form .kpn-toggle { display: none;
}
.kpn-form .kpn-toggle ~ label { color: red; border: 1px solid red;
}
.kpn-form .kpn-toggle + label { display: block; position: relative; background-color: #f3f3f3; border: 1px solid #e3e3e3; border-radius: 15px; padding: 2px !important; transition: all .4s ease; width: 60px; height: 30px; cursor: pointer; user-select: none;
}
.kpn-form .kpn-toggle + label:after, .kpn-form .kpn-toggle + label:before { display: block; content: ""; position: relative; width: 24px; height: 24px;
}
.kpn-form .kpn-toggle + label:before { content: "uit"; color: #333; left: 32px; top: 2px; font-size: 12px; font-weight: bold;
}
.kpn-form .kpn-toggle + label:after { left: 0; top: -24px; border-radius: 50%; background: #fff; transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease; box-shadow: 0 0 0 1px rgba(51, 51, 51, 0.1), 0 4px 0 rgba(51, 51, 51, 0.08);
}
.kpn-form .kpn-toggle + label:active:after { padding-right: 12px;
}
.kpn-form .kpn-toggle:checked + label { background-color: #090; padding-left: 0;
}
.kpn-form .kpn-toggle:checked + label:before { content: "aan"; color: #fff; left: 4px; top: 2px;
}
.kpn-form .kpn-toggle:checked + label:after { left: 30px; top: -24px;
}
.kpn-form .kpn-toggle:checked + label:active { box-shadow: none;
}
.kpn-form .kpn-toggle:checked + label:active:after { margin-left: -12px;
}
.kpn-form label,
.kpn-form select,
.kpn-form option,
.kpn-form button,
.kpn-form input[type="submit"],
.kpn-form input[type="reset"] { cursor: pointer;
}
.kpn-form label + input[type="color"],
.kpn-form label + input[type="date"],
.kpn-form label + input[type="datetime"],
.kpn-form label + input[type="datetime-local"],
.kpn-form label + input[type="email"],
.kpn-form label + input[type="month"],
.kpn-form label + input[type="number"],
.kpn-form label + input[type="password"],
.kpn-form label + input[type="search"],
.kpn-form label + input[type="tel"],
.kpn-form label + input[type="text"],
.kpn-form label + input[type="time"],
.kpn-form label + input[type="url"],
.kpn-form label + input[type="week"],
.kpn-form label + textarea { display: block; font-weight: bold; color: red;
}
.kpn-form label + input[type="color"]:disabled,
.kpn-form label + input[type="date"]:disabled,
.kpn-form label + input[type="datetime"]:disabled,
.kpn-form label + input[type="datetime-local"]:disabled,
.kpn-form label + input[type="email"]:disabled,
.kpn-form label + input[type="month"]:disabled,
.kpn-form label + input[type="number"]:disabled,
.kpn-form label + input[type="password"]:disabled,
.kpn-form label + input[type="search"]:disabled,
.kpn-form label + input[type="tel"]:disabled,
.kpn-form label + input[type="text"]:disabled,
.kpn-form label + input[type="time"]:disabled,
.kpn-form label + input[type="url"]:disabled,
.kpn-form label + input[type="week"]:disabled,
.kpn-form label + textarea:disabled { cursor: not-allowed;
}
.kpn-form fieldset { border: 0; margin: 0 0 20px 0; padding: 0;
}
.kpn-form fieldset legend { font-size: 20px;
}
.kpn-form fieldset > p { margin: 0 0 20px 0;
}
.kpn-form fieldset > p:last-of-type { margin-bottom: 0;
}
.kpn-form p input { margin-top: 0;
}
input[type="submit"],
button,
.kpn-btn { /* styles below are aiming on the primary button specified in the styling guidelines doc, if you want a secondary type, append .type-secondary. make sure you ALWAYS append a size to your buttons... */ display: inline-block; background-color: #09f; color: #fff; border-radius: 3px; border: 1px solid #fff; font-family: "KPN Accent", Arial, Helvetica, Verdana, sans-serif; margin: 20px 0 20px 20px; cursor: pointer; transition: all .25s;
}
input[type="submit"]:first-of-type,
button:first-of-type,
.kpn-btn:first-of-type { margin-left: 0;
}
input[type="submit"]:hover,
button:hover,
.kpn-btn:hover { background-color: #0d76bc;
}
input[type="submit"]:disabled.size-small, input[type="submit"]:disabled.size-medium, input[type="submit"]:disabled.size-large,
button:disabled.size-small,
button:disabled.size-medium,
button:disabled.size-large,
.kpn-btn:disabled.size-small,
.kpn-btn:disabled.size-medium,
.kpn-btn:disabled.size-large { cursor: not-allowed;
}
input[type="submit"]:disabled.size-small:hover, input[type="submit"]:disabled.size-medium:hover, input[type="submit"]:disabled.size-large:hover,
button:disabled.size-small:hover,
button:disabled.size-medium:hover,
button:disabled.size-large:hover,
.kpn-btn:disabled.size-small:hover,
.kpn-btn:disabled.size-medium:hover,
.kpn-btn:disabled.size-large:hover { background-color: #09f; box-shadow: none;
}
input[type="submit"].size-small,
button.size-small,
.kpn-btn.size-small { padding: 9px 20px; font-family: "KPN Sans", Arial, Helvetica, Verdana, sans-serif; font-size: 13px;
}
input[type="submit"].size-medium,
button.size-medium,
.kpn-btn.size-medium { padding: 12px 30px; font-size: 16px;
}
input[type="submit"].size-large,
button.size-large,
.kpn-btn.size-large { padding: 20px 30px; font-size: 20px; font-weight: 200;
}
input[type="submit"].size-large.has-icon,
button.size-large.has-icon,
.kpn-btn.size-large.has-icon { padding-left: 80px; background-size: 35px; background-repeat: no-repeat; background-position: 30px 50%;
}
input[type="submit"].state-inactive,
button.state-inactive,
.kpn-btn.state-inactive { color: #fff; border-color: #d3d3d3; cursor: pointer;
}
input[type="submit"].type-secondary,
button.type-secondary,
.kpn-btn.type-secondary { color: #09f; border-color: #09f; background-color: #fff;
}
input[type="submit"].type-secondary:disabled.size-small, input[type="submit"].type-secondary:disabled.size-medium, input[type="submit"].type-secondary:disabled.size-large,
button.type-secondary:disabled.size-small,
button.type-secondary:disabled.size-medium,
button.type-secondary:disabled.size-large,
.kpn-btn.type-secondary:disabled.size-small,
.kpn-btn.type-secondary:disabled.size-medium,
.kpn-btn.type-secondary:disabled.size-large { cursor: not-allowed;
}
input[type="submit"].type-secondary:disabled.size-small:hover, input[type="submit"].type-secondary:disabled.size-medium:hover, input[type="submit"].type-secondary:disabled.size-large:hover,
button.type-secondary:disabled.size-small:hover,
button.type-secondary:disabled.size-medium:hover,
button.type-secondary:disabled.size-large:hover,
.kpn-btn.type-secondary:disabled.size-small:hover,
.kpn-btn.type-secondary:disabled.size-medium:hover,
.kpn-btn.type-secondary:disabled.size-large:hover { box-shadow: none; background-color: #fff;
}
input[type="submit"].type-secondary.size-small:hover,
button.type-secondary.size-small:hover,
.kpn-btn.type-secondary.size-small:hover { box-shadow: 0 0 5px 1px rgba(171, 213, 243, 0.95);
}
input[type="submit"].type-secondary.size-medium:hover,
button.type-secondary.size-medium:hover,
.kpn-btn.type-secondary.size-medium:hover { box-shadow: 0 0 7px 1px rgba(171, 213, 243, 0.95);
}
input[type="submit"].type-secondary.size-large:hover,
button.type-secondary.size-large:hover,
.kpn-btn.type-secondary.size-large:hover { box-shadow: 0 0 9px 1px rgba(171, 213, 243, 0.95);
}
input[type="submit"].type-secondary.state-inactive,
button.type-secondary.state-inactive,
.kpn-btn.type-secondary.state-inactive { color: #b3b3b3; border-color: #d3d3d3;
}
input[type="submit"]::-webkit-input-placeholder,
button::-webkit-input-placeholder,
.kpn-btn::-webkit-input-placeholder { color: #f33;
}
input[type="submit"]::-moz-placeholder,
button::-moz-placeholder,
.kpn-btn::-moz-placeholder { color: #f33;
}
input[type="submit"]:-moz-placeholder,
button:-moz-placeholder,
.kpn-btn:-moz-placeholder { color: #f33;
}
input[type="submit"]:-ms-input-placeholder,
button:-ms-input-placeholder,
.kpn-btn:-ms-input-placeholder { color: #f33;
}
input[type="color"] + label,
input[type="date"] + label,
input[type="datetime"] + label,
input[type="datetime-local"] + label,
input[type="email"] + label,
input[type="month"] + label,
input[type="number"] + label,
input[type="password"] + label,
input[type="search"] + label,
input[type="tel"] + label,
input[type="text"] + label,
input[type="time"] + label,
input[type="url"] + label,
input[type="week"] + label,
input[type="checkbox"] + label,
textarea + label { display: block; font-weight: bold; color: red;
}
.kpn-accordion { list-style: none; perspective: 900; padding: 0; margin: 30px 0 0 0; border-bottom: 1px solid #d3d3d3;
}
.kpn-accordion li { position: relative; margin: 0; padding: 0; border-top: 1px solid #d3d3d3; animation: flipdown .25s ease both;
}
.kpn-accordion li:nth-of-type(1) { animation-delay: .125s;
}
.kpn-accordion li:nth-of-type(2) { animation-delay: .25s;
}
.kpn-accordion li:nth-of-type(3) { animation-delay: .375s;
}
.kpn-accordion li:nth-of-type(4) { animation-delay: .5s;
}
.kpn-accordion li:nth-of-type(5) { animation-delay: .625s;
}
.kpn-accordion li:nth-of-type(6) { animation-delay: .75s;
}
.kpn-accordion li:nth-of-type(7) { animation-delay: .875s;
}
.kpn-accordion li:nth-of-type(8) { animation-delay: 1s;
}
.kpn-accordion li:last-of-type { padding-bottom: 0;
}
.kpn-accordion li h3 { font-family: "KPN Sans", Arial, Helvetica, Verdana, sans-serif; font-size: 16px; font-weight: bold; margin-left: 20px; width: calc(100% - 30px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpn-accordion li h3:hover { color: #09f;
}
.kpn-accordion li h3:hover ~ i { color: #09f;
}
.kpn-accordion li i { position: absolute; top: 20px; right: 10px; transform: translate(-6px, 0);
}
.kpn-accordion li i:before, .kpn-accordion li i:after { content: ""; transition: all .25s ease-in-out; position: absolute; background-color: #333; width: 1px; height: 9px;
}
.kpn-accordion li i:before { transform: translate(4px, 0) rotate(45deg);
}
.kpn-accordion li i:after { transform: translate(-2px, 0) rotate(-45deg);
}
.kpn-accordion li input[type="radio"] { position: absolute; cursor: pointer; width: 100%; height: 100%; z-index: 1; opacity: 0;
}
.kpn-accordion li input[type="radio"]:checked ~ p { opacity: 1; transform: translate(0, 0); margin-top: 1em; max-height: 800px;
}
.kpn-accordion li input[type="radio"]:checked ~ p:last-child { margin-bottom: 1em;
}
.kpn-accordion li input[type="radio"]:checked ~ i:before, .kpn-accordion li input[type="radio"]:checked ~ i:after { background-color: #090;
}
.kpn-accordion li input[type="radio"]:checked ~ i:before { transform: translate(-4px, 0) rotate(45deg);
}
.kpn-accordion li input[type="radio"]:checked ~ i:after { transform: translate(2px, 0) rotate(-45deg);
}
.kpn-accordion li input[type="radio"]:checked ~ h3, .kpn-accordion li input[type="radio"]:checked:hover .kpn-accordion li input[type="radio"]:checked ~ h3 { color: #090;
}
.kpn-accordion li input[type="radio"]:checked p { margin-top: 1.5em; margin-bottom: 0;
}
.kpn-accordion li input[type="radio"]:checked p:first-child { margin-top: 0;
}
.kpn-accordion li input[type="radio"]:hover ~ h3 { color: #09f;
}
.kpn-accordion li input[type="radio"]:hover ~ i:before, .kpn-accordion li input[type="radio"]:hover ~ i:after { background-color: #09f;
}
.kpn-accordion p { position: relative; z-index: 2; overflow: hidden; width: calc(100% - 40px); margin: 0 0 0 20px; max-height: 0; opacity: 0; transition: all .25s ease-in-out; transform: translate(0, 50%);
}
@media (min-width: 768px) { .kpn-accordion li h3 { margin-left: 0; } .kpn-accordion p { margin-left: 0; }
}
Accordion demootje - Script Codes
Accordion demootje - Script Codes
Home Page Home
Developer Jermaine
Username dviate
Uploaded August 26, 2022
Rating 3
Size 14,607 Kb
Views 34,408
Do you need developer help for Accordion demootje?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jermaine (dviate) Script Codes
Name
Test
Cross Browser Autofill Form
Telecom preloader in SVG
Mac Baby
Sticky header and footer
Filter testje
A Pen by Jermaine
Console fun
Testje voor KPN
Blur demo
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!