cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h1>Title</h1>
<h2>Faq Section 1</h2>
<dl class="faq js-faq">
  <dt class="faq__question js-faq-question">Question 1</dt>
  <dd class="faq__answer js-faq-answer">
    <p>Nam non nulla sed est ultricies dapibus. Pellentesque nulla erat, <a href="#">pharetra non lorem</a> ac, tempor viverra urna. Donec non leo fermentum, egestas diam a, mollis mauris.</p>
  </dd>
  <dt class="faq__question js-faq-question">Question 2</dt>
  <dd class="faq__answer js-faq-answer">
    <p>Nam non nulla sed est ultricies dapibus. Pellentesque nulla erat, pharetra non lorem ac, tempor viverra urna. Donec non leo fermentum, egestas diam a, mollis mauris.</p>
  </dd>
  <dt class="faq__question js-faq-question">Question 3</dt>
  <dd class="faq__answer js-faq-answer">
    <p>Nam non nulla sed est ultricies dapibus. Pellentesque nulla erat, pharetra non lorem ac, tempor viverra <a href="#">urna</a>. Donec non leo fermentum, egestas diam a, mollis mauris.</p>
  </dd>
</dl>
<h2>Faq Section 2</h2>
<dl class="faq js-faq">
  <dt class="faq__question js-faq-question">Question 4</dt>
  <dd class="faq__answer js-faq-answer">
    <p>Nam non nulla sed est ultricies dapibus. Pellentesque nulla erat, pharetra non lorem ac, tempor viverra urna. Donec non leo fermentum, egestas diam a, mollis mauris.</p>
  </dd>
  <dt class="faq__question js-faq-question">Question 5</dt>
  <dd class="faq__answer js-faq-answer">
    <p>Nam non nulla <a href="#">sed est ultricies</a> dapibus. Pellentesque nulla erat, pharetra non lorem ac, tempor viverra urna. Donec <a href="#">non leo</a> fermentum, egestas diam a, mollis mauris.</p>
  </dd>
  <dt class="faq__question js-faq-question">Question 6</dt>
  <dd class="faq__answer js-faq-answer">
    <p>Nam non nulla sed est ultricies dapibus. Pellentesque nulla erat, pharetra non lorem ac, tempor viverra urna. Donec non leo fermentum, egestas diam a, mollis mauris.</p>
  </dd>
</dl>
            
          
!
            
              .faq__question {
  color: CornflowerBlue;
  cursor: pointer;
  padding: .5em 1em;
}

.faq__answer {
  display: none;
}

.faq__answer.active {
  display: block;
}

.no-js .faq__question {
  color: black;
  cursor: default;
}

.no-js .faq__answer {
  display: block;
}

body {
  margin: 2em;
}
            
          
!
            
                    (function (document, window, undefined) {

  'use strict';

  // Vars
  var faqSection = $('.js-faq'),
    faqQuestion = $('.js-faq-question'),
    faqAnswer = $('.js-faq-answer'),
    showOneAnswerAtATime = false;

  /**
   * Save question focus
   */
  var saveFocus = function (elem, thisSectionFaqQuestions) {

    // Reset other tab attributes
    thisSectionFaqQuestions.each(function () {
      $(this).attr('tabindex', '-1');
      $(this).attr('aria-selected', 'false');
    });

    // Set this tab attributes
    elem.attr({
      'tabindex': '0',
      'aria-selected': 'true'
    });

  };

  /**
   * Show answer on click
   */
  var showAnswer = function (elem, thisSectionFaqQuestions) {
    var thisFaqAnswer = elem.next();
    
    // Save focus
    saveFocus(elem, thisSectionFaqQuestions);

    // Set this tab attributes
    if (thisFaqAnswer.hasClass('active')) {
      // Hide answer
      thisFaqAnswer.removeClass('active');      
      elem.attr('aria-expanded', 'false');      
      thisFaqAnswer.attr('aria-hidden', 'true');
    } else {
      if (showOneAnswerAtATime) {
        // Hide all answers
        faqAnswer.removeClass('active').attr('aria-hidden', 'true');
        faqQuestion.attr('aria-expanded', 'false');
      }
      
      // Show answer
      thisFaqAnswer.addClass('active');      
      elem.attr('aria-expanded', 'true');      
      thisFaqAnswer.attr('aria-hidden', 'false');
    }
  };

  /**
   * Keyboard interaction
   */
  var keyboardInteraction = function (elem, e, thisSectionFaqQuestions) {
    var keyCode = e.which,
      nextQuestion = elem.next().next().is('dt') ? elem.next().next() : false,
      previousQuestion = elem.prev().prev().is('dt') ? elem.prev().prev() : false,
      firstQuestion = elem.parent().find('dt:first'),
      lastQuestion = elem.parent().find('dt:last');

    switch(keyCode) {
    // Left/Up
    case 37:
    case 38:
      e.preventDefault();
      e.stopPropagation();

      // Check for previous question
      if (!previousQuestion) {
        // No previous, set focus on last question
        lastQuestion.focus();
      } else {
        // Move focus to previous question
        previousQuestion.focus();
      }

      break;

    // Right/Down
    case 39:
    case 40:
      e.preventDefault();
      e.stopPropagation();

      // Check for next question
      if (!nextQuestion) {
        // No next, set focus on first question
        firstQuestion.focus();
      } else {
        // Move focus to next question
        nextQuestion.focus();
      }

      break;

    // Home
    case 36:
      e.preventDefault();
      e.stopPropagation();

      // Set focus on first question
      firstQuestion.focus();
      break;

    // End
    case 35:
      e.preventDefault();
      e.stopPropagation();

      // Set focus on last question
      lastQuestion.focus();
      break;

    // Enter/Space
    case 13:
    case 32:
      e.preventDefault();
      e.stopPropagation();

      // Show answer content
      showAnswer(elem, thisSectionFaqQuestions);
      break;
    }

  };

  /**
   * On load, setup roles and initial properties
   */
  
  // Each FAQ Question
  faqQuestion.each(function (i) {
    $(this).attr({
      'id': 'faq-question-' + i,
      'role': 'tab',
      'aria-controls': 'faq-answer-' + i,
      'aria-expanded': 'false',
      'aria-selected': 'false',
      'tabindex': '-1'
    });
  });

  // Each FAQ Answer
  faqAnswer.each(function (i) {
    $(this).attr({
      'id': 'faq-answer-' + i,
      'role': 'tabpanel',
      'aria-labelledby': 'faq-question-' + i,
      'aria-hidden': 'true'
    });
  });

  // Each FAQ Section
  faqSection.each(function () {
    var $this = $(this),
      thisSectionFaqQuestions = $this.find('.js-faq-question');

    // Set section attributes
    $this.attr({
      'role': 'tablist',
      'aria-multiselectable': 'true'
    });

    thisSectionFaqQuestions.each(function (i) {
      var $this = $(this);

      // Make first tab clickable
      if (i === 0) {
        $this.attr('tabindex', '0');
      }

      // Click event
      $this.on('click', function () {
        showAnswer($(this), thisSectionFaqQuestions);
      });

      // Keydown event
      $this.on('keydown', function (e) {
        keyboardInteraction($(this), e, thisSectionFaqQuestions);
      });

      // Focus event
      $this.on('focus', function () {
        saveFocus($(this), thisSectionFaqQuestions);
      });
    });
  });

})(document, window  );

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console