GetResources - Can I pick your brains

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

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>

You could do something like this:

In the template/content use getResources to output the days

[[getResources?
    &parents=`11` //<-- change this value to the id of the page "Schedule"
    &depth=`0`
    &tpl=`tplTab`
    &limit=`0`
]]

Then in the chunk tplTab call getResources to output all its children

<div id="menu[[+id]]" class="tab-pane fade">
  <div class="row">
    <div class="col-12 pd1">
      <p>[[+pagetitle]] Content</p>
        [[getResources?
            &parents=`[[+id]]`
            &tpl=`tplProgramme`
            &limit=`0`
        ]]
    </div>
  </div>
</div>