@All Couchies!!! Good Afternoon!!!

I am trying to set the active class on the bootstrap tabs. So that the first tab is selected and the content of the first tab ONLY, is displayed. Also, If a tab is blank (when i switch to it), no data should be displayed.

Here is my current code:
Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
   <cms:template title='Student Testimonial' clonable='1' dynamic_folders='1'>
         <cms:editable name='stud_test_content_image' label='Details - Image' type='image' show_preview='1' preview_width='100' />
         <cms:editable name='stud_test_content_testi' label='Details - Testimonial' type='nicedit' />
   </cms:template>
<html>
   <head>
      <title>Student Testimonial</title>
      <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel='stylesheet' />
   </head>
   <body>
      
      <!-- Content -->
      <div class="container">         
         <div class="row">
            <div class="col-md-12">
               <!-- Nav tabs -->
               <ul class="nav nav-tabs" role="tablist">
                  <cms:folders order='desc' start_count='1'>
                  <li role="presentation" class="<cms:if k_count='1'>active</cms:if>">
                     <a href="#<cms:show k_folder_name />" aria-controls="home" role="tab" data-toggle="tab">
                        <cms:show k_folder_title />
                     </a>
                  </li>
                  </cms:folders>
               </ul>

               <!-- Tab panes -->
               <div class="tab-content">
                  <cms:folders  order='desc'>
                  <cms:pages folder=k_folder_name start_count='1'>
                  <div role="tabpanel" class="tab-pane <cms:if k_count='1'>active</cms:if>" id="<cms:show k_folder_name />">
                     Name: <cms:show k_page_title /><br>
                     Image: <img src="<cms:show stud_test_content_image />" /><br>
                     Testimonial: <cms:show stud_test_content_testi />
                     <div style="padding-bottom: 30px;"></div>
                  </div>
                  </cms:pages>
                  </cms:folders>
               </div>
            </div>
         </div>
      </div>
      <!-- Content -->
      
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
      <script>
         $('a').click(function (e) {
            e.preventDefault()
            $('this a:first').tab('show')
         })
      </script>
   </body>
</html>
<?php COUCH::invoke(); ?>


The Dynamic folders are used to show the tab Titles and Selectors. But by default the first tab should be active. Unable to set the class="active on the tab and the tab content div.

How can i achieve these two things???

Regards,
Aashish