Last active
June 21, 2019 01:46
-
-
Save eeejay/5272c5c500759da510a0 to your computer and use it in GitHub Desktop.
Good Example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Good Example</title> | |
| <style> | |
| body { | |
| margin: 50px; | |
| } | |
| h3 { | |
| margin: 0; | |
| } | |
| dt { | |
| float: left; | |
| clear: left; | |
| font-weight: bold; | |
| margin-left: 1rem; | |
| } | |
| dt:after{ | |
| content: ':\00a0'; | |
| } | |
| .server { | |
| position: relative; | |
| box-sizing: border-box; | |
| width: 100%; | |
| margin: 0 0 5px 0; | |
| border: 0; | |
| padding: 20px; | |
| background-color: green; | |
| color: #fff; | |
| font-family: helvetica; | |
| font-size: 18px; | |
| line-height: 1.7; | |
| text-align: left; | |
| } | |
| .server_down .server{ | |
| background-color: red; | |
| } | |
| .server:after { | |
| content: 'details \25B8'; | |
| speak: none; | |
| position: absolute; | |
| top: 2em; | |
| right: 20px; | |
| display: inline-block; | |
| border-radius: 4px; | |
| border: 0px none; | |
| padding: 5px 11px; | |
| box-shadow: 0px -2px rgba(0,0,0, 0.5) inset; | |
| background-color: #fff; | |
| color: #4D4E53; | |
| font-weight: normal; | |
| font-size: 14px; | |
| line-height: 1; | |
| text-transform: uppercase; | |
| } | |
| .server[aria-expanded="true"]:after { | |
| content: 'details \25BE'; | |
| } | |
| .server:hover, | |
| .server:focus { | |
| text-decoration: underline; | |
| cursor: pointer; | |
| } | |
| .server:hover:after, | |
| .server:focus:after { | |
| padding: 8px 14px; | |
| top: calc(2em - 3px); | |
| text-decoration: underline; | |
| cursor: pointer; | |
| } | |
| .server:before { | |
| content: '\2713'; | |
| speak: none; | |
| } | |
| .server_down .server:before { | |
| content: '\2715'; | |
| speak: none; | |
| } | |
| .server_details { | |
| margin-bottom: 5px; | |
| margin-top: -8px; | |
| padding: 0; | |
| border: 3px solid green; | |
| font-family: helvetica; | |
| line-height:2; | |
| list-style-type: none; | |
| transition: height 0.5s ease-in-out, visibility 0.5s; | |
| height: 8rem; | |
| overflow: hidden; | |
| } | |
| .server_down + .server_details { | |
| border-color: red; | |
| } | |
| .server_details.hidden { | |
| height: 0; | |
| visibility: hidden; | |
| } | |
| .offscreen { | |
| position: absolute; | |
| height: 1px; | |
| width: 1px; | |
| overflow: hidden; | |
| clip: rect(1px 1px 1px 1px); | |
| clip: rect(1px, 1px, 1px, 1px); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h3> | |
| <button class="server" aria-controls="blueberry" aria-expanded="false" aria-label="Server up: Blueberry"> | |
| Blueberry | |
| </button> | |
| </h3> | |
| <dl class="server_details hidden" id="blueberry"> | |
| <dt>Hostname</dt><dd>web02.onr.example.com</dd> | |
| <dt>Service Tag</dt><dd>JCQFZK1</dd> | |
| <dt>Datacentre</dt><dd>ONR</dd> | |
| <dt>Rack Location</dt><dd>104.6, Unit #24</dd> | |
| </dl> | |
| <h3 class="server_down"> | |
| <button class="server" aria-controls="raspberry" aria-expanded="true" aria-label="Server down: Raspberry"> | |
| Raspberry | |
| </button> | |
| </h3> | |
| <dl class="server_details" id="raspberry"> | |
| <dt>Hostname</dt><dd>web02.onr.example.com</dd> | |
| <dt>Service Tag</dt><dd>JCQFZK1</dd> | |
| <dt>Datacentre</dt><dd>ONR</dd> | |
| <dt>Rack Location</dt><dd>104.6, Unit #24</dd> | |
| </dl> | |
| <h3> | |
| <button class="server" aria-controls="strawberry" aria-expanded="false" aria-label="Server up: Raspberry"> | |
| Strawberry | |
| </button> | |
| </h3> | |
| <dl class="server_details hidden" id="strawberry"> | |
| <dt>Hostname</dt><dd>web02.onr.example.com</dd> | |
| <dt>Service Tag</dt><dd>JCQFZK1</dd> | |
| <dt>Datacentre</dt><dd>ONR</dd> | |
| <dt>Rack Location</dt><dd>104.6, Unit #24</dd> | |
| </dl> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script> | |
| <script> | |
| (function ($) { | |
| $.fn.toggleExpand = function(){ | |
| // this == control element | |
| var $controller = $(this); | |
| // get controlled element | |
| var controlledId = $controller.attr('aria-controls'); | |
| var $controlled = $('#' + controlledId); | |
| // toggle values on both | |
| $controller.ariaToggle('aria-expanded'); | |
| $controlled.toggleClass('hidden'); | |
| // make it so we can chain this function, like any good jQuery function | |
| return this; | |
| }; | |
| $.fn.ariaToggle = function(attr) { | |
| var $this = $(this); | |
| var currentValue = $this.attr(attr); | |
| if(currentValue === 'true'){ | |
| $this.attr(attr, false); | |
| } else { | |
| $this.attr(attr, true); | |
| } | |
| // make it so we can chain this function, like any good jQuery function | |
| return this; | |
| }; | |
| $('.server').on('click', function(){ | |
| $(this).toggleExpand(); | |
| }); | |
| }(jQuery)); | |
| </script> | |
| <!-- Google Tag Manager --> | |
| <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-5VJ2HD" | |
| height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> | |
| <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': | |
| new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], | |
| j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= | |
| '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); | |
| })(window,document,'script','dataLayer','GTM-5VJ2HD');</script> | |
| <!-- End Google Tag Manager --> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment