Skip to main content

Partial Disclosure v1.7.0

Reaveal or hide partially visible content when triggered, helping to manage the display of supplementary information.

Accessibility Engineer

Pellentesque habitant morbi tristique clem fandango et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Feugiat vitae

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Google

Note: In this example, the title triggers the hidden content below it. This is more clear and preferred over offsetting a button. The .partial-disclosure__trigger class can be placed on any element you wish to include as a trigger.

<div class="partial-disclosure">
  
  <h2 class="partial-disclosure__trigger">Accessibility Engineer</h2>
  
  <div class="partial-disclosure__content">
  
    <p>Pellentesque habitant morbi tristique <a href="#!">clem fandango</a> et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <a href="https://www.google.com">Aenean ultricies</a> mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    
    <h3 tabindex="0">Feugiat vitae</h3>
    
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    
    <p><a href="https://www.google.com">Google</a></p>
    
  </div>
    
</div>
/*!

  Radancy Component Library: Partial Disclosure

  Contributor(s): 
  Michael "Spell" Spellacy

  Dependencies: Sass

*/

$base-color: #6F00EF;

.partial-disclosure {

  &__trigger {
  margin-bottom: 0;

    button {
    background-color: transparent;
    border: 0;
    color: $base-color;
    cursor: pointer;
    font: inherit;
    }

  }

  &__btn {
  background-color: $base-color;
  border: 0;
  color: #fff;
  display: flex;
  margin-block: 1em;
  margin-inline: auto 0;
  padding: 1em;

    [data-button-bottom] & {

      margin-inline-start: 0;

    }

  }

  &__icon {
  margin-inline-start: 0.5em;

    &::after {
    display: inline-block;
    content: "+";
    }

    [aria-expanded="true"] & {

      &::after {
      content: "-";
      }

    }

  }

  &__content {
  max-height: none;
  overflow: hidden;
  padding: 0.5em 0.5em 1em;
  position: relative;

    // Fade effect

    &::after {
    background-image: linear-gradient( rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
    content: "";
    display: none;
    height: calc(100rem / 16);
    inset-block-end: 0;
    inset-inline-start: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
    }

    &[aria-hidden] {
    max-height: calc(280rem /16);
    
      * {
      pointer-events: none;
      }

      &::after {
      display: block;
      }

    }

  }

}
/*!

  Radancy Component Library: Partial Disclosure

  Contributor(s):
  Michael "Spell" Spellacy

*/

(function() {

  "use strict";

  // Display which component version in use via console:

  console.log("%cPartial Disclosure%cv1.7.0", "background: #2d2d2d; color: #fff; padding: 6px 10px; border-radius: 16px 0 0 16px; font-weight: 600;" , "background: #6e00ee; color: #fff; padding: 6px 10px; border-radius: 0 16px 16px 0; font-weight: 600;");

  var readMoreClass = ".partial-disclosure";
  var readMoreContentClass = ".partial-disclosure__content";
  var readMoreButtonName = "partial-disclosure__btn";
  var readMoreButtonIconName = "partial-disclosure__icon";
  var readMoreButtonLabelName = "partial-disclosure__label";
  var readMoreButtomPosition = "data-button-bottom";
  var readMoreButtonLabel = "data-button-label";
  var readMoreDefaultText = "Read More";
  var readMore = document.querySelectorAll(readMoreClass);
  var focusElms = ["a", "audio", "area", "button", "*[contenteditable]", "details", "input", "iframe", "object", "select", "summary", "textarea", "video", "*[tabindex]"];

  function focusableElements(target, tabindex) {

    // Loop through each selector in the focusElms array
    
    focusElms.forEach(function(selector) {
      
      // Get all elements matching the current selector within the content area.
  
      var elements = target.querySelectorAll(selector);
  
      // Loop through each matching element
  
      elements.forEach(function(el) {
  
        // Set the tabindex attribute to -1

        if(tabindex === true) {
  
          el.setAttribute("tabindex", "-1");

        } else {

          el.removeAttribute("tabindex");

        }
  
      });

    });

  }
  
  // Set up and loop through all Read More components on page

  readMore.forEach(function(content){

    // Get custom trigger if it exists.

    var customReadMoreBtn = content.querySelector(".partial-disclosure__trigger");

    // Prep Content

    var readMoreContent = content.querySelector(readMoreContentClass);

    readMoreContent.setAttribute("aria-hidden", "true");

    // Set tabindex to all focusable elements in "partial-disclosure__content"

    focusableElements(readMoreContent, true);

    // Prep Disclosure

    var readMoreButton = document.createElement("button");

    readMoreButton.setAttribute("aria-expanded", "false");

    // Tracking

    readMoreButton.setAttribute("data-custom-event", "true");
    readMoreButton.setAttribute("data-custom-category", "Component");
    readMoreButton.setAttribute("data-custom-label", "Partial Disclosure v1.7.0");

    if(!customReadMoreBtn) {

      readMoreButton.setAttribute("class", readMoreButtonName);

    }

    // Disclosure Label

    var readMoreLabel = document.createElement("span");
    readMoreLabel.setAttribute("class", readMoreButtonLabelName);

    // Disclosure Text

    if (content.hasAttribute(readMoreButtonLabel)) {

      readMoreLabel.textContent = content.getAttribute(readMoreButtonLabel);
    
    } else { 

      if(customReadMoreBtn) {
    
        var customReadMoreTxt = customReadMoreBtn.textContent;
  
        readMoreLabel.textContent = customReadMoreTxt;
        customReadMoreBtn.textContent = "";
  
      } else {
    
        readMoreLabel.textContent = readMoreDefaultText;

      }
    
    }

    // Disclosure Icon

    var readMoreButtonIcon = document.createElement("span");
    readMoreButtonIcon.setAttribute("aria-hidden", "true");
    readMoreButtonIcon.setAttribute("class", readMoreButtonIconName);

    readMoreButton.append(readMoreLabel);
    readMoreButton.append(readMoreButtonIcon);

    if (content.hasAttribute(readMoreButtomPosition)) {

      content.append(readMoreButton);

    } else {

      if(customReadMoreBtn) {

        customReadMoreBtn.append(readMoreButton);

      } else {

        content.prepend(readMoreButton);

      }

    }

    // Disclosure Event

    readMoreButton.addEventListener("click", function() {

      // Toggle aria-expanded

      var ariaExpanded = this.getAttribute("aria-expanded") === "true" || false;
  
      this.setAttribute("aria-expanded", !ariaExpanded);

      // Toggle Content

      var readMoreContent = this.closest(readMoreClass).querySelector(readMoreContentClass);
  
      if (readMoreContent.hasAttribute("aria-hidden")) {

        readMoreContent.removeAttribute("aria-hidden")
        readMoreContent.setAttribute("tabindex", "-1");

        if(this.closest(readMoreClass).hasAttribute(readMoreButtomPosition)) {
      
          readMoreContent.focus();

        }

        // Remove tabindex from all focusable elements in content.

        focusableElements(readMoreContent);

      } else {
  
        readMoreContent.removeAttribute("tabindex");
        readMoreContent.setAttribute("aria-hidden", "true");
      
        if(this.closest(readMoreClass).hasAttribute(readMoreButtomPosition)) {
      
          readMoreContent.scrollIntoView({ 
            
            behavior: "smooth", 
            block: "start" 
          
          });

        }

        // Set tabindex on all focusable elements in content.

        focusableElements(readMoreContent, true);

      } 

    });

  });

})();

Avoid Toggling Text

Toggling text in a control to indicate a state change should be avoided. For example, click on the following button:

Why is this an issue?

Solution

Here is an example of visual affordance:

Properties

Use the following properties to configure this component.

Attribute Applies To Note Description
data-button-bottom .partial-disclosure Boolean, Optional
Used to position disclosure button at the bottom of the partially visible content. Please note that this is not recommended. The default position is at the top of the content.
data-button-label .partial-disclosure String, Optional
Used to apply custom text to the disclosure button, which can be useful, especially when translations are required. The default text is "Read More".

Class Applies To Note Description
.partial-disclosure div, section Mandatory
Used on the parent element that wraps your content.
.partial-disclosure__btn button Component
Used on the disclosure button. This element is dynamically inserted by the component.
.partial-disclosure__content div Mandatory
Used on the element that wraps your partially visible content. Must be a child of .partial-disclosure.
.partial-disclosure__icon span Component
Used on the disclosure button icon. This element is dynamically inserted by the component.
.partial-disclosure__label span Component
Used on the disclosure button label. This element is dynamically inserted by the component.
.partial-disclosure__trigger All Optional
Used to initiate a custom trigger. Can be placed on any HTML element. May only be used once.

Release Notes

Keep up to date on major changes to this component.

Feature
Support inline SVG in button. For now, the Default Setup can be used.

Report Issues

Find a bug? Want a new feature? Report it on JIRA. You're so awesome!