MODX Community

Help with sitting up tab items in Migx

I’m trying to set up tab items for a front-end and I have no idea how to get the menu (list Items) of it working with Migx, If I pull the list items in with [[getImageList? &tvname=tab&tpl=tab-menu]] it will not connect with the content itself, and if I just let it pull in with all the code in one place I will end up with a new <ul> each time. I’m sure I’m missing something simple but I can’t seem to get my head around what I’m doing with it right now any help would be much appreciated

Migx Code

[
{"caption":"New Tab Heading (Menu)", "fields": [
{"field":"tab","caption":"Menu Heading","inputTVtype":"text"}
]},
{"caption":"Content", "fields": [
{"field":"heading","caption":"Heading","inputTVtype":"text"},
{"field":"description","caption":"Content","inputTVtype":"richtext"}
]},
{"caption":"List Items", "fields": [
{"field":"list","caption":"List Items","inputTV":"list"}
]},
{"caption":"Images", "fields": [
{"field":"image","caption":"Image for Content","inputTV":"imageplus"}
]}
]

Bootstrap I’m using

<ul class="nav nav-pills nav-pills-border-bottom nav-pills-border-lg nav-justified flex-row justify-md-content-center" role="tablist" data-toggle="scrollbar" tabindex="5" style="overflow: hidden; outline: none; cursor: grab;">
          <li class="nav-item"> <a class="nav-link text-center text-uppercase font-weight-bold px-3 px-lg-4 py-3 active" id="nav-tab[[+idx]]" data-toggle="tab" href="#nav[[+idx]]" role="tab" aria-controls="nav[[+idx]]" aria-selected="true">[[+tab]]</a> </li>
              </ul>
 <div class="container">
          <div class="row">
            <div class="col-xs-12 ">
              <div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
                <div class="tab-pane fade" id="nav[[+idx]]" role="tabpanel" aria-labelledby="nav-tab[[+idx]]">
        <div class="row">
            <div class="col-lg-12">
              <div data-animate="fadeIn" data-animate-duration="0.8">
                <hr class="hr-lg mt-3 mb-3 w-10 mx-auto op-4 hr-primary" />
                <h2 class="text-center text-muted text-uppercase font-weight-light">
                </h2>
    			<hr />
            <div class="icon-rotate-270 pos-absolute text-grey op-6 mt-10 text-x2 ml-10-neg text-uppercase display-2">
               </div>
              </div>
            </div>
                <div class="col-lg-6" data-animate="fadeIn" data-animate-delay="0.4" data-animate-offset="100%">
                  <div class="font-weight-lighter m-3 text-justify text-muted text-x1">[[+description]]</div>
    			   </div>
                <div class="col-lg-6" data-animate="fadeIn" data-animate-delay="0.8" data-animate-offset="100%">
                  <ul class="fa-ul list-unstyled mt-4 text-muted text-sm mt-md-0">
      
                  </ul>
                </div>
               </div>
              </div>
            </div>
           </div>
          </div>
        </div>

I think, what you want is a nested MIGX, where the outer MIGX is for the tabs and the inner MIGX is for the items
https://forums.modx.com/thread/90045/need-some-help-with-nested-migx

Hi Bruno thanks for the help

Sorry half the code was missing, The main problem I’m having is with [[+idx]] when setting up a new menu item and tab section

If i add a call of

 [[getImageList? 
        &tvname=`tab`
        &tpl=`@CODE:
     <li class="nav-item"> <a class="nav-link text-center text-uppercase font-weight-bold px-3 px-lg-4 py-3" id="nav-tab[[+idx]]" data-toggle="tab" href="#nav[[+idx]]" role="tab"  aria-controls="nav[[+idx]]" aria-selected="false">[[+tab]]</a> </li>`]]

and

[[getImageList? 
        &tvname=`tab`
        &tpl=`@CODE:
   <div class="tab-pane fade active show" id="nav[[+idx]]" role="tabpanel" aria-labelledby="nav-tab[[+idx]]">
    <div class="row">
        <div class="col-lg-12">
          <div data-animate="fadeIn" data-animate-duration="0.8">
            <hr class="hr-lg mt-3 mb-3 w-10 mx-auto op-4 hr-primary" />
            <h2 class="text-center text-muted text-uppercase font-weight-light">
             [[+heading]] 
            </h2>
			<hr />
        <div class="icon-rotate-270 pos-absolute text-grey op-6 mt-10 text-x2 ml-10-neg text-uppercase display-2">
            [[+heading]]
           </div>
          </div>
        </div>
            <div class="col-lg-6" data-animate="fadeIn" data-animate-delay="0.4" data-animate-offset="100%">
              <div class="font-weight-lighter m-3 text-justify text-muted text-x1">[[+description]]</div>
			   </div>
            <div class="col-lg-6" data-animate="fadeIn" data-animate-delay="0.8" data-animate-offset="100%">
              <ul class="fa-ul list-unstyled mt-4 text-muted text-sm mt-md-0">
  [[getImageList?
    &tvname=`tab`
    &tpl=`list`]] 
              </ul>
            </div>
           </div>
          </div>`]]

The tabs and content get a different [[+idx]] , Now I know it’s something I’m doing wrong my head is not with it today