<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h1>dislosure widget</h1>

<details id="example">

<summary tabindex="0" role="button" aria-controls="example" onkeypress="this.focus();">HTML5 detail/summary <br> <!-- <label>text <input></label>--> </summary>

<ul><li><a href="http://www.w3.org/TR/html51/semantics.html#the-details-element">4.11.1 The details element</a></li>

<li><a href="http://www.w3.org/TR/html51/semantics.html#the-summary-element">4.11.2 The summary element</a></li>

<li>ARIA used to polyfill browser implementation:
<ul>
<li><a href="http://www.w3.org/TR/wai-aria/roles#button">role=button</a></li>
<li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-expanded">aria-expanded</a></li>
<li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-controls">aria-controls</a></li>

</ul></li>

</ul>

</details>

<script>

function supports_details() {
  return ('open' in document.createElement('details'));  
}


$(document).ready(function(){
  $("details summary").attr("aria-expanded", function(){ 
    return $(this).parent("details").is("[open]") ? "true" : "false";
  })

  if (!supports_details()) {
    $("details").addClass("no-det");
  }

  $('details summary').keypress(function(event) {
    if ( event.which == 13||event.which == 32 ) {
      $(this).click();
    }
  }).click(function() {
    var $summary = $(this);
    var $details = $summary.parent();
      if ($details.attr("open")) {
        if ($details.hasClass("no-det")) {
          $details.removeAttr("open");
        }
        $summary.attr("aria-expanded", "false");
      }
      else {
        if ($details.hasClass("no-det")) {
          $details.attr("open", "open");
        }
        $summary.attr("aria-expanded", "true");
      }
  }); 
});
  
$(document).ready(function(){
  $("label").click(function(event){
    event.stopPropagation();
  // alert("The span element was clicked.");
  });
});
</script>
summary, details { display: block; }

details { visibility: hidden; }

details > summary { visibility:  visible; }



details[open] summary.no-det:before { transform: rotate(90deg); }

details[open] { visibility: visible; }


details summary, details { display: block; font-family: Calluna, Arial, sans-serif; background: #333; width: 15em; border-radius: .1em .1em 0 0; font-size: 1.5rem; margin: 2rem auto; color: #fff; }

details summary { cursor: pointer; padding: 1em; padding-left: 3rem; margin-top: 0; }

details { background: linear-gradient(#999,#ddd); border-radius: .1em; padding-top: 0;width:18em;color: #000; }

details summary::before { content:"►"; font-size: 1em; position: relative; left: -1em; transition: .3s linear; }

details[open] summary::before { content:"▼"; font-size: 1em; position: relative; left: -1em; transition: .3s linear;  color: red; }

summary:hover { cursor: pointer; }

details[open]  { padding-bottom: 1rem; }

details.no-details { max-height: 3em; overflow: hidden;  transition: 1s max-height ease-in-out; }

details.no-details[open] { max-height: 20em; padding-bottom: 1em; }

details a { display: block; }
summary:focus {outline:yellow solid 2px;}
details summary::-webkit-details-marker { display:none; }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.