I’m designing a website at the moment and one of the pages is a schedule for a radio station. So the pages look like this
- Schedule
- Monday
- Programme 1
- Programme 2
- Programme 3
- Tuesday
- Programme 1
- Programme 2
- Programme 3
- Wednesday
- Programme 1
- Programme 2
- Programme 3
- Thursday
- Programme 1
- Programme 2
- Programme 3
- Friday
- Programme 1
- Programme 2
- Programme 3
- Saturday
- Programme 1
- Programme 2
- Programme 3
- Sunday
- Programme 1
- Programme 2
- Programme 3
- Monday
I’m using Bootstrap Nav-Tabs and Tab-Content (Navs and Tabs). I’m using two GetResources to bring back the data. The first GetResources in the Nav-Tabs brings back the the titles Monday, Tuesday, Wednesday and so on. I get that and it works. Now the issue I have is the second GetResources. I want it to bring back the programmes of each day OR is there a way to link both the GetResources together?
DOES THIS MAKE SENSE?
Here’s my simple code:
Nav Tabs
<div class="col-12">
<ul class="nav nav-tabs">
<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#menu0">Monday</a></li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu1">Tuesday</a></li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu2">Wednesday</a></li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu3">Thursday</a></li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu4">Friday</a></li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu5">Saturday</a></li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu6">Sunday</a></li>
</ul>
</div>
Tab Content Code
<div class="col-12">
<div class="tab-content">
<div id="menu0" class="tab-pane active">
<div class="row">
<div class="col-12 pd1">
<p>Monday Content</p>
</div>
</div>
</div>
<div id="menu1" class="tab-pane fade">
<div class="row">
<div class="col-12 pd1">
<p>Tuesday Content</p>
</div>
</div>
</div>
<div id="menu2" class="tab-pane fade">
<div class="row">
<div class="col-12 pd1">
<p>Wednesday Content</p>
</div>
</div>
</div>
<div id="menu3" class="tab-pane fade">
<div class="row">
<div class="col-12 pd1">
<p>Thursday Content</p>
</div>
</div>
</div>
<div id="menu4" class="tab-pane fade">
<div class="row">
<div class="col-12 pd1">
<p>Friday Content</p>
</div>
</div>
</div>
<div id="menu5" class="tab-pane fade">
<div class="row">
<div class="col-12 pd1">
<p>Saturday Content</p>
</div>
</div>
</div>
<div id="menu6" class="tab-pane fade">
<div class="row">
<div class="col-12 pd1">
<p>Sunday Content</p>
</div>
</div>
</div>
</div>
</div>