coldfusion - Dynamic bootstrap active tab -
is there way can rid of hard coded active tab , corresponding panel when outputting dynamic content? somehow make first iteration of dynamic content active tab + panel. code below works fine, active tab/panel pretty pointless in scenario.
<div role="tabpanel"> <!-- nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">home</a></li> <cfoutput query="lessons" group="lesson_date"> <li role="presentation"><a href="###dateformat(lesson_date, 'ddddd')#" aria-controls="#dateformat(lesson_date, 'ddddd')#" role="tab" data-toggle="tab">#dateformat(lesson_date, 'ddddd')#, #dateformat(lesson_date, 'd')# #dateformat(lesson_date, 'mmmm')#</a></li> </cfoutput> </ul> <!-- tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">home</div> <cfoutput query="lessons" group="lesson_date"> <div role="tabpanel" class="tab-pane" id="#dateformat(lesson_date, 'ddddd')#"> <cfoutput>#lesson_id#<br></cfoutput> </div> </cfoutput> </div> </div>
you can give try:
<div role="tabpanel"> <!-- nav tabs --> <ul class="nav nav-tabs" role="tablist"> <cfoutput query="lessons" group="lesson_date"> <li role="presentation" <cfif lessons.currentrow eq 1>class="active"</cfif>> <a href="###dateformat(lesson_date, 'ddddd')#" aria-controls="#dateformat(lesson_date, 'ddddd')#" role="tab" data-toggle="tab" >#dateformat(lesson_date, 'ddddd')#, #dateformat(lesson_date, 'd')# #dateformat(lesson_date, 'mmmm')# </a> </li> </cfoutput> </ul> <!-- tab panes --> <div class="tab-content"> <cfoutput query="lessons" group="lesson_date"> <div role="tabpanel" class="#lessons.currentrow eq 1 ? 'tab-pane active' : 'tab-pane'#" id="#dateformat(lesson_date, 'ddddd')#"> #lesson_id#<br> </div> </cfoutput> </div> </div>
note:- don't need wrap lesson_id
cfoutput inside cfoutput unless want loop on results returned outer cfoutput
.
Comments
Post a Comment