Multi Panel Content

Pending update

The “Multi Panel Content” template is designed to create toggleable content panels within a single page. It allows you to consolidate multiple pages or sections of content into one.

It is essential to maintain an equal number of content panels and navigation items. In the provided example, there are six panels and six corresponding menu items.

[Get Post 1] in here

[Get Post 2] in here

[Get Post 3] in here

[Get Post 4] in here

[Get Post 5] in here

[Get Post 6] in here

<div class="multi-panel-wrapper">
  <div class="multi-panel-menu">
    <div class="panel-menu-item" data-panel="1">1. Lorem Ipsum</div>
    <div class="panel-menu-item" data-panel="2">2. Lorem Ipsum</div>
    <div class="panel-menu-item" data-panel="3">3. Lorem Ipsum</div>
    <div class="panel-menu-item" data-panel="4">4. Lorem Ipsum</div>
    <div class="panel-menu-item" data-panel="5">5. Lorem Ipsum</div>
    <div class="panel-menu-item" data-panel="6">6. Lorem Ipsum</div>
  </div>
  <hr>
  <div class="panel-wrapper">
    <div class="panel-item" data-panel="1">
      <!-- Page content in here -->
    </div>
    <div class="panel-item" data-panel="2">
      <!-- Page content in here -->
    </div>
    <div class="panel-item" data-panel="3">
      <!-- Page content in here -->
    </div>
    <div class="panel-item" data-panel="4">
      <!-- Page content in here -->
    </div>
    <div class="panel-item" data-panel="5">
      <!-- Page content in here -->
    </div>
    <div class="panel-item" data-panel="6">
      <!-- Page content in here -->
    </div>
  </div>
</div>