Accordion & Content

  <z-container class="wizard theme-light">
    <z-row class="pt-0 pb-0 mobile:reverse">
      <z-col class="feature pt-0">
        <div class="wizard-step card bg-grey-2 h-300" id="step-1">
          Section 1 Content
        </div>
        <div class="wizard-step card bg-grey-3 h-300" id="step-2">
          Section 2 Content
        </div>
        <div class="wizard-step card bg-grey-4 h-300" id="step-3">
          Section 3 Content
        </div>
      </z-col>
      <z-col class="pb-0">
        <div class="accordion">
          <a href="" class="title accordion-toggle naked text-semibold wizard-nav" aria-expanded="true" aria-controls="content1" data-step="1">
            <i class="zenicon-keyboard-arrow-down down-1"></i>Section 1 Title</a>
          <div id="content1" class="expanded-content naked show" aria-hidden="false">
            <p>This is a description of the section 1 content.</p>
          </div>

          <a class="title accordion-toggle naked text-semibold wizard-nav" aria-expanded="false" aria-controls="content2" data-step="2">
            <i class="zenicon-keyboard-arrow-right down-1"></i>Section 2 Title</a>
          <div id="content2" class="expanded-content naked" aria-hidden="true">
            <p>This is a description of the section 2 content.</p>
          </div>

          <a class="title accordion-toggle naked text-semibold wizard-nav" aria-expanded="false" aria-controls="content3" data-step="3">
            <i class="zenicon-keyboard-arrow-right down-1"></i>Section 3 Title</a>
          <div id="content3" class="expanded-content naked" aria-hidden="true">
            <p>This is a description of the section 3 content.</p>
          </div>
        </div>
      </z-col>
    </z-row>
  </z-container>