Accordion

Lorem ipsum dolor sit amet, consectetur Testadipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris.

      .mod-accordion-button style='width: 480px;'
  button.button.action Maecenas
  .details
    p Lorem ipsum dolor sit amet, consectetur Testadipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris.
    

    $('.button').on('click', function() {
  $(this).next().slideToggle(250);
});
  

Phasellus

In hac habitasse platea dictumst

In rhoncus orci

Pellentesque habitant morbiLeo id odio

Vivamus ultricies augue in tortor

      .mod-accordion
  .section
    .header
      h4 Aenean ac bibendum
      .toggle-accordion
    .body
      .textfield
        .field
          label for='text1' Phasellus
          input type='text' id='text1' placeholder='Curabitur ex nibh'
      .selectfield
        .field
          label for='select1' In hac habitasse platea dictumst
          .selectbox
            select id='select1'
              option Lacus
              option Varius
              option Eleifend
      .selectfield
        .field
          label for='select2' In rhoncus orci
          .selectbox
            select id='select2'
              option Lacus
              option Varius
              option Eleifend
      .checkbox-list
        .header
          h4 Vivamus eu aliquet
          p
            | (sapien, non fringilla enim)
        .content
          label.checkbox
            input type='checkbox'
            span Pellentesque habitant morbi
          label.checkbox
            input type='checkbox'
            span Leo id odio
      button.button.action Fusce euismod bibendum
      .hint Vivamus ultricies augue in tortor

  .section
    .header
      h4 Proin aliquam tortor
      .toggle-accordion
      em Aliquam sapien enim, elementum
    .body
      p Lorem ipsum dolor sit amet, consectetur Testadipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum.
  .section
    .header
      h4 Mauris semper faucibus tellus
      .toggle-accordion
    .body
      p Lorem ipsum dolor sit amet, consectetur Testadipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum.

css:
  .exampleOutput { background-color: #FBFBFB; }
  .mod-accordion { max-width: 25rem; }
    

    $('.mod-accordion .header').on('click', function() {
  $(this).parents('.section').toggleClass('expanded');
  $(this).parents('.section').find('.body').slideToggle(500);
});
  

PolicyGenius - Style Guide

Accordion

Aenean ac bibendum

Vivamus eu aliquet

Proin aliquam tortor

Mauris semper faucibus tellus