To make the current active roster more user-friendly I created a template using BS3 panels. @SgtBen Improved on the CSS.
What needs to be done for implementation:
- Agree that this is a good idea
- Create the php loops and SQL queries to dynamically generate this structure.
Output:
Starting code (including CDN for BS3 in order for me to dev)
<html>
<header>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous"></script>
</header>
<body>
<!--Nested Panel Start-->
<!--First Level-->
<div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading1" style="text-align-last: center;">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapse1" aria-expanded="true" aria-controls="collapse1" class="collapsed">
<span>Platoon Leader Capt James</span> <i class="glyphicon glyphicon-plus"></i>
</a>
</h3>
</div>
<div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body">
<!-- Second Level Start -->
<ul class="list-group"style="text-align-last: center;">
<li class="list-group-item">SFC Kevin</li>
</ul>
<!-- 11 Start-->
<div class="col-md-4 panel-group" id="accordion11" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading11">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion11" href="#collapse11" aria-expanded="true" aria-controls="collapse11" class="collapsed">
<span>Section Commander SSgt Zero</span> <i class="glyphicon glyphicon-plus"></i>
</a>
</h3>
</div>
<div id="collapse11" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading11">
<div class="panel-body">
<!-- 111 Start-->
<div class="panel-group" id="accordion111" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading111">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion111" href="#collapse111" aria-expanded="true" aria-controls="collapse111" class="collapsed">
<span>Team Leader Cpl Ryolitt</span> <i class="glyphicon glyphicon-plus"></i>
</a>
</h3>
</div>
<div id="collapse111" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading111">
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">Pvt Kaddion</li>
<li class="list-group-item">Pvt Parker</li>
<li class="list-group-item">Pvt Johannes</li>
<li class="list-group-item">Pvt Orv</li>
<li class="list-group-item">Rec Fomöl</li>
<li class="list-group-item">Rec Supermaster</li>
<li class="list-group-item">Rec Norseman</li>
</ul>
</div>
</div>
</div>
<!-- 111 End-->
<!-- 112 Start-->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading112">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion111" href="#collapse112" aria-expanded="true" aria-controls="collapse112" class="collapsed">
<span>Team Leader Cpl Triffle</span> <i class="glyphicon glyphicon-plus"></i>
</a>
</h3>
</div>
<div id="collapse112" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading112">
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">PFC Mason</li>
<li class="list-group-item">PFC Maciek</li>
<li class="list-group-item">Pvt neulon</li>
<li class="list-group-item">Pvt Roger</li>
<li class="list-group-item">Pvt Darren</li>
<li class="list-group-item">Pvt RadicalZulu</li>
<li class="list-group-item">Rec elmobai</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 112 End-->
</div>
</div>
</div>
</div>
<!-- 11 END-->
<!-- 12 Start-->
<div class="col-md-4 panel-group" id="accordion12" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading12">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion12" href="#collapse12" aria-expanded="true" aria-controls="collapse12" class="collapsed">
<span>Section Commander Sgt Ben</span> <i class="glyphicon glyphicon-plus"></i>
</a>
</h3>
</div>
<div id="collapse12" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading12">
<div class="panel-body">
<!-- 121 Start-->
<div class="panel-group" id="accordion121" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading121">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion121" href="#collapse121" aria-expanded="true" aria-controls="collapse121" class="collapsed">
<span>Team Leader J. "Willy" Wilson</span> <i class="glyphicon glyphicon-plus"></i>
</a>
</h3>
</div>
<div id="collapse121" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading121">
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">Pvt Sally</li>
<li class="list-group-item">Pvt Link</li>
<li class="list-group-item">Pvt Jobbas</li>
<li class="list-group-item">Pvt Deksterus</li>
<li class="list-group-item">Pvt TheGood1</li>
<li class="list-group-item">Rec Aveletsky</li>
<li class="list-group-item">Rec Doofus</li>
</ul>
</div>
</div>
</div>
<!-- 121 End-->
<!-- 122 Start-->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading122">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion121" href="#collapse122" aria-expanded="true" aria-controls="collapse122" class="collapsed">
<span>Team Leader Cpl Pidu</span> <i class="glyphicon glyphicon-plus"></i>
</a>
</h3>
</div>
<div id="collapse122" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading122">
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">PFC Squido</li>
<li class="list-group-item">PFC Bradley</li>
<li class="list-group-item">Pvt Dobbie</li>
<li class="list-group-item">Pvt nikjo</li>
<li class="list-group-item">Pvt Jari</li>
<li class="list-group-item">Pvt WitchHunter</li>
<li class="list-group-item">Pvt Walker</li>
<li class="list-group-item">Rec Magni</li>
<li class="list-group-item">Rec Jakey</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 122 End-->
</div>
</div>
</div>
</div>
<!-- 12 End-->
<!-- 13 Start-->
<div class="col-md-4 panel-group" id="accordion13" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading13">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion13" href="#collapse13" aria-expanded="true" aria-controls="collapse13" class="collapsed">
<span>Section Commander Sgt Attackbee</span> <i class="glyphicon glyphicon-plus"></i>
</a>
</h3>
</div>
<div id="collapse13" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading13">
<div class="panel-body">
<!-- 131 Start-->
<div class="panel-group" id="accordion131" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading131">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion131" href="#collapse131" aria-expanded="true" aria-controls="collapse131" class="collapsed">
<span>Team Leader Cpl Jules</span> <i class="glyphicon glyphicon-plus"></i>
</a>
</h3>
</div>
<div id="collapse131" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading131">
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">PFC BigRed</li>
<li class="list-group-item">PFC Skelly</li>
<li class="list-group-item">Pvt BloodyMartyr</li>
<li class="list-group-item">Pvt Jeppie</li>
<li class="list-group-item">Pvt Crossy</li>
<li class="list-group-item">Pvt Pollard90</li>
<li class="list-group-item">Rec Foreman</li>
<li class="list-group-item">Rec Pak</li>
<li class="list-group-item">Rec Realindo</li>
</ul>
</div>
</div>
</div>
<!-- 131 End-->
<!-- 132 Start-->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading132">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion131" href="#collapse132" aria-expanded="true" aria-controls="collapse132" class="collapsed">
<span>Team Leader Cpl Mattjamco</span> <i class="glyphicon glyphicon-plus"></i>
</a>
</h3>
</div>
<div id="collapse132" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading132">
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">PFC Ghost</li>
<li class="list-group-item">Pvt DeathGhosts</li>
<li class="list-group-item">Pvt Trustii</li>
<li class="list-group-item">Pvt Gustav</li>
<li class="list-group-item">Pvt Falobalob</li>
<li class="list-group-item">Pvt Jadd</li>
<li class="list-group-item">Pvt Sharkhouse</li>
<li class="list-group-item">Pvt Waermflasche</li>
<li class="list-group-item">Pvt Jam</li>
<li class="list-group-item">Rec Flubber Dubber</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 132 End-->
</div>
</div>
</div>
</div>
<!-- 13 End-->
</div>
</div>
</div>
</div>
<!--Nested Panel End-->
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>
</html>