Формы с вкладками (tabs) и сворачиваемыми панелями (accordeon)

В примере задействованы сворачиваемые панели и вкладки (табы). В них вставлены сниппеты компонентов таблица и форма. 

Минусы подобного решения: 

• данные компонентов грузятся сразу при загрузке страницы (если их будет очень много, то это создает лишнюю загрузку). Альтернативное решение - загрузка через кнопки as-form-link и модальные окна as-form-modal, когда данные грузятся по запросу. 
• пользователи могут забывать сохранять формы и переходить на другие формы. Альтернативные решения - формы в модальном окне и сохранение полей по одиночке. 

Пример разметки: 

<nav>
	<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
		<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Tab 1</a>
		<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Tab 2</a>						
	</div>
</nav>
<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
	<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
		
		<div id="accordion">
		  <div class="card">
		    <div class="card-header" id="headingOne">
		      <h5 class="mb-0">
		        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
		          Form 1
		        </button>
		      </h5>
		    </div>
		
		    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
		      <div class="card-body">
		        <div class="as-form" data-code="watch_bg" data-itemID="1"></div>
		      </div>
		    </div>
		  </div>
		  <div class="card">
		    <div class="card-header" id="headingTwo">
		      <h5 class="mb-0">
		        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
		          Form 2 
		        </button>
		      </h5>
		    </div>
		    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
		      <div class="card-body">
		        <div class="as-form" data-code="watch_reset" data-itemID="1"></div>
		      </div>
		    </div>
		  </div>
		  <div class="card">
		    <div class="card-header" id="headingThree">
		      <h5 class="mb-0">
		        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
		          Form 3
		        </button>
		      </h5>
		    </div>
		    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
		      <div class="card-body">
		        <div class="as-form" data-code="watch_savefield" data-itemID="1"></div>
		      </div>
		    </div>
		  </div>
		</div>
	</div>
	<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
		<div class="as-table" data-code="watch_editing" data-itemID="0"></div>
	</div>					
</div>