<ul class="stepper" id='stepper' data-mdb-stepper-init>

  <li class="stepper-step stepper-active">

    <div class="stepper-head">

      <span class="stepper-head-icon">1</span>

      <span class="stepper-head-text">step1</span>

    </div>

    <div class="stepper-content py-3">

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

      incididunt ut labore et dolore magna aliqua

    </div>

  </li>

  <li class="stepper-step">

    <div class="stepper-head">

      <span class="stepper-head-icon">2</span>

      <span class="stepper-head-text">step2</span>

    </div>

    <div class="stepper-content py-3">

      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip

      ex ea commodo consequat      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip

      ex ea commodo consequat      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip

      ex ea commodo consequat      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip

      <button class='toggler'>

        show element

      </button>

      <div class="d-none hidden-el">

      ex ea commodo consequat      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip

      ex ea commodo consequat      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip

      ex ea commodo consequat      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip

      ex ea commodo consequat      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip

      ex ea commodo consequat      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip

      ex ea commodo consequat

      </div>

    </div>

  </li>

  <li class="stepper-step">

    <div class="stepper-head">

      <span class="stepper-head-icon">3</span>

      <span class="stepper-head-text">step3</span>

    </div>

    <div class="stepper-content py-3">

      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu

      fugiat nulla pariatur

    </div>

  </li>

</ul>

​

const toggler = document.querySelector('.toggler')

const hiddenEl = document.querySelector('.hidden-el')

​

const myStepperEl = document.getElementById('stepper');

const stepper = new mdb.Stepper(myStepperEl);

​

toggler.addEventListener('click', () => {

  hiddenEl.classList.remove('d-none')

  stepper.resizeStepper()

})

​

​