Help:Shortcode Details

{{< details "Hello" >}}
Hello Details
{{< /details >}}

<!-- 

  Details Shortcode
  =================

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Child Shortcodes: None
  Parent Shortcodes: None

  LAYOUT: /layouts/shortcodes/details.html
  STYLE:  /assets/scss/components/_shortcode_details.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Details.md

  Description
  -----------

  Use the details shortcode to hide information in an expandable container.

  Changelog
  =========

  Version 1
  ---------

  Initial release

-->

<details{{ with .Get 1 }} {{ . | safeHTML }}{{ end -}}>
  <summary>{{ with .Get 0 -}}{{ . | safeHTML }}{{ else -}}{{ errorf "No summary provided"}}{{ end -}}</summary>
  {{ with .Inner -}}{{ . | markdownify}}{{ else -}}{{ errorf "No details provided"}}{{ end -}}
</details>

/*

  Details Shortcode
  ======================

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Child Shortcodes: None
  Parent Shortcodes: None

  LAYOUT: /layouts/shortcodes/details.html
  STYLE:  /assets/scss/components/_shortcode_details.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Details.md

*/

details {
  display: block;
  border: 1px solid $gray-200;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem 0;
  margin: 0.5rem 0;
}

summary {
  list-style: none;
  display: inline-block;
  width: calc(100% + 2rem);
  margin: -0.5rem -1rem 0;
  padding: 0.5rem 0.75rem;
}

summary::-webkit-details-marker {
  display: none;
}

summary:hover {
  background: $gray-100;
}

details summary::before {
  display: inline-block;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%2829, 45, 53, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform 0.35s ease;
  transform-origin: center center;
  margin-right: 0.375rem;
}

details[open] > summary::before {
  transform: rotate(90deg);
}

details[open] {
  padding: 0.5rem 1rem;
}

details[open] > summary {
  border-bottom: 1px solid $gray-300;
  margin-bottom: 0.5rem;
}

details h2,
details h3,
details h4 {
  margin: 1rem 0 0.5rem;
}

details p:last-child {
  margin-bottom: 0;
}

details ul,
details ol {
  margin-bottom: 0;
}

details pre {
  margin: 0 0 1rem;
}