@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:
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
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