VirtueMart Forum

I would like to have tabs for review, description, spec, etc. on the product pages. Is this a simple solution to integrate in Vm 2.0+ or 2.0.8e? What will I need to do to get tabs on the product page?

Hi Jerome,

I'm going to assume you know a bit about PHP and jQuery, but basically you don't need any third party plugins as other topics have been suggesting. The solution is simple:

THE CODE (place in "/templates/YOUR_TEMPLATE/html/com_virtuemart/productdetails/default.php")


   
    <div id="tabContainer">
   
        <ul>
            <li><a class="active" href="#tab1">Details</a></li>
            <li><a href="#tab2">Reviews/Comments</a></li>
            <li><a href="#tab3">Related Products</a></li>
        </ul><!-- //Tab buttons -->
       
        <div class="tabDetails">
       
            <div id="tab1" class="tabContents">
            YOUR CONTENT CODE FOR DETAILS GOES HERE
            </div><!-- //tab1 -->
            <div id="tab2" class="tabContents">
            YOUR CONTENT CODE FOR REVIEWS/COMMENTS GOES HERE
            </div><!-- //tab2 -->
            <div id="tab3" class="tabContents">
            YOUR CONTENT CODE FOR RELATED PRODUCTS GOES HERE
            </div><!-- //tab3 -->
           
        </div><!-- //tab Details -->
       
    </div><!-- //Tab Container -->
<script type="text/javascript">
jQuery(function ($){

$(".tabContents").hide();
$(".tabContents:first").show();

$("#tabContainer ul li a").click(function(e){
e.preventDefault();
var activeTab = $(this).attr("href");
$("#tabContainer ul li a").removeClass("active");
$(this).addClass("active");
$(".tabContents").hide();
$(activeTab).fadeIn();
});

});
    </script>
   


THE CSS STYLE



div#tabContainer {
margin:30px 0 0 0;
padding:0;
position:relative;
}
div#tabContainer ul {
overflow:hidden;
height:35px;
position:absolute;
z-index:100;
}
div#tabContainer li {
float:left;
list-style:none;
margin-right:1px;
}
div#tabContainer li a {
background:#ddd;
color:#666;
cursor:pointer;
display:block;
padding:5px 9px;
text-decoration:none;
font-size:12px;
}
div#tabContainer li a:hover {
background:#eee;
}
div#tabContainer li a.active {
background:#fbfbfb;
color:#333;
}
.tabDetails {
margin:0;
padding:28px 0 0 0;
}
.tabContents {
padding:10px;
border-top:2px solid #ddd;
}



Now, it you're cluey enough to see the pattern you can create unlimited amounts of tabs... (obviously as much as your browser width will dictate). If not, here's a quickie piece of knowledge:

To create MORE tabs...

• Create more LIST ITEMS ('<li><a href="#tab4">WHAT EVER</a></li>')
• Match it to a corresponding div ('<div id="tab4" class="tabContents">WHAT EVER CONTENT</div><!-- //tab4 -->')
• Make sure you get the tab name correct for both ('#tab4')

Good luck.

Thank you for the reply. I will try when I get home.

Sent from my PG86100 using Tapatalk 2

Hi there, I worked on it and it seams all is fine.
Nicely done and easily to understand.

I set a tab to show details and one to show description.

Now I would like to create another tab to show the short description, I tryed several way but got no results.

How can I do that, I mean what code should insert here

<div id="tab1" class="tabContents">
               YOUR CONTENT CODE 
            </div>


to have the short description in the tab?

Hello,

You could use the following:

<div id="tab1" class="tabContents">
<?php // Product Short Description
    if(!empty($this->product->product_s_desc)) { ?>
<p class="product_s_desc">
<?php echo shopFunctionsF::limitStringByWord($this->product->product_s_desc, 200, '...') ?>
</p>
<?php } //Product Short Description END?>
</div>


if you doesn't want to use the function limitStringByWord to limit the size of the content you could use the following

<div id="tab1" class="tabContents">
<?php // Product Short Description
    if(!empty($this->product->product_s_desc)) { ?>
<p class="product_s_desc">
<?php echo $this->product->product_s_desc; ?>
</p>
<?php } //Product Short Description END?>
</div>


Just an example, you should try to read the forum, specially the following posts:

Product fields: http://forum.virtuemart.net/index.php?topic=92756.0
Category Fields: http://forum.virtuemart.net/index.php?topic=97744.0
and
http://forum.virtuemart.net/index.php?topic=100696.0

Regards

Thank you very much!

I will work on it, I was able to solve with a normal
  <?php  echo $this->product->product_s_desc; ?> 

But I have something else in mind for another zone in the website and definitely you gave me some idea.

;-)


Beside that any idea how to insert in the tabs another tab where the content (that is not the main description nor the short description) can be modified each product?

Hi,

always better is to do it as

  if(!empty($this->product->product_s_desc))
     {
      echo $this->product->product_s_desc;
     } ?>

tabs inside tabs, not good idea i suppose, horizontal tabs with vertical menu is a better design, imho.

Regards

I love this function, but where to put the CSS code inside? Or make a new CSS file?

Hello,

Make a new property inside your vm css file. You can use firebug to examine your code and style.

http://forum.virtuemart.net/index.php?topic=102850.0

ivus

Thanks you for supplying the code. I have implemented the code. But the e.preventDefault does not seem to be working. I presume this bit of code is to prevent the page jumping to the top on each click event? Is there something I have done wrong?  I am fairly new to Javascript so I have probably made an obvious mistake.

Here's my code:

   <div id="tabContainer">
   
        <ul>
            <li><a class="active" href="#tab1">Product Specifications</a></li>
            <li><a href="#tab2">Tab 2</a></li>
        </ul><!-- //Tab buttons -->
       
        <div class="tabDetails">
       
            <div id="tab1" class="tabContents">
               <?php echo $this->product->product_desc; ?>                
            </div><!-- //tab1 -->
            <div id="tab2" class="tabContents"> 
                <?php echo $this->product->product_desc; ?>     
            </div><!-- //tab2 -->
           
        </div><!-- //tab Details -->
       
    </div><!-- //Tab Container -->
   <script type="text/javascript">
      jQuery(function ($){
         
         $(".tabContents").hide();
         $(".tabContents:first").show();
         
         $("#tabContainer ul li a").click(function(e){
            e.preventDefault();                                          
            var activeTab = $(this).attr("href");
            $("#tabContainer ul li a").removeClass("active");
            $(this).addClass("active");
            $(".tabContents").hide();
            $(activeTab).fadeIn();
            
         });
         
      });
    </script>   
   
I also tried adding these lines of codes

   e.stopPropagation();
       e.stopImmediatePropagation();

but they didn't stop the page jumping to the top either.

thanks in advance

Ed

I there, im trying to use this tab system, i insert the code and is all good but where do i put de description text for the second tab???

First tab- product description from virtuemart product
Second tab - i wont to make another description with dimensions of the product and maybe a image, where to i put this text???
Third tab - maybe some additional info, but same problem where do i put the info???

http://www.mobiliariocomluz.pt/index.php/mobiliario-de-interior/sofas-e-cadeiras-sem-leds/natural-zebra_details.html

Thanks

Hello,

As is see your tabs is working, what you need is to add a new custom field for your product with extra information you will need.

Regards

It seems its working, tanks for the tip bytelord.

Do you know how i make the title of the second tab, not appear in the content???

Can i make another custom field for the 3º tab?

Hello,

As many custom fields as you want, you have to echo those custom fields inside your tab.
What do you mean?? "Do you know how i make the title of the second tab, not appear in the content???"

Regards

Sorry for my English

If you click on the Product dimension Tab, in the text it have Product Dimensions again in bold, i think that's the costume fiel title, but i have that in the tab so i wood like to remove it.

Hello,

You could edit your PHP file or edit your css creating an override for the custom field titles.

.product-fields-title {
display:none;
}

this will work for all custom field titles, or you could specify better the tab title

.tabDetails .product-fields-title {
display:none;
}


Use firebug to examine your site code and css styling: http://forum.virtuemart.net/index.php?topic=102850.0

-----

Also you could make an override for the file joomla_folder\components\com_virtuemart\views\productdetails\tmpl\default_customfields.php
just copy that file to create a template override under joomla_folder\templates\your_joomla_Template\html\com_virtuemart\productdetails\default_customfields.php

and change the following line as you wish ... you could comment that code out.

<span class="product-fields-title" ><?php //echo JText::_($field->custom_title); ?></span>



Some more information regarding template system and template overrides:
Template overrides: http://forum.virtuemart.net/index.php?topic=98505.0
Template System: https://dev.virtuemart.net/projects/virtuemart/wiki/Hints_for_the_use_of_the_template_system

Regards

Is there any way to only show a Tab if the product have information on that costume field???

Hello,

Use some PHP ... if custom field not empty {
begin tab code
.
.
.
end tab code
}

Any idea where i can get that kind of code??

I don't know PHP, just some cut and past, by attempts.

I have to put that code in this area before each <li>???

<ul>
            <li><a class="active" href="#tab1">Descrição do Produto</a></li>
            <li><a href="#tab2">Dimensões do Produto</a></li>
            <li><a href="#tab3">Informação Adicional</a></li>
        </ul><!-- //Tab buttons -->

Hello,

You could create a new position for your custom field (under custom field configuration - load position). For example lets say 'posDetails'
So you php code will be like the following ...

<ul>
<?php if (!empty($this->product->customfieldsSorted['posDetails'])) { ?>
       
            <li><a class="active" href="#tab1">Descrição do Produto</a></li>     
<?php } ?>
     <li><a href="#tab2">Dimensões do Produto</a></li>
     <li><a href="#tab3">Informação Adicional</a></li>
    </ul><!-- //Tab buttons -->

after loading the content of the tab

<?php if (!empty($this->product->customfieldsSorted['posDetails'])) {
        $this->position='posDetails'; 
        echo $this->loadTemplate('customfields'); 
} ?>

Regards

Thanks bytelord that worked just fine.

Hey guys,

This solution worked perfectly however there is a minor issue on this jquery code as when you clicked to one of the tabs page just jumps to the top of the page. It might be annoying for your visitors so is there a way to prevent going top of the page when you clicked to any of the tabs?

Thanks in advance.

Any live url to check on that? may be conflicts with other jquery plugin or joomla template jquery factionality.

Hello,

Working great in IE9/10, Chrome and Firefox i tested. When you mean jumps to the top to mean when clicking out of ask-a-question tab. This is normal ... because the size of the content of you page becomes smaller :)
Is web pages works ... you will increase it when you will place some nice footer or any other modules :)

Regards

Hey,

Yes I totally wasnt aware of that. I just increased the height of my page and it works well. :)

Thanks for the help.

Thanks @ivus for this code and all other posters..works great!  :D

the js on mine is not hiding the other tabs content, now it is all displayed on one list, I have to use jquery easy for other elements on the page, do you think this is stripping it out?

nothing but nothing I try gets the script to run, any clues guys?

Link?

And are sure that this tabs method is the only available option for you? I'm pretty sure that I saw more then one tabbing technique.

Hi Maxim, the site is locked as per request by client. This so far as I can see is the only tabs method that is done within the productdetails php file itself, there are modules and extensions that enable you to add tabs into the product descriptions, but that is not ideas as every product you would have to go and put in the custom code for example: reviews where with this method you can just put echo $this->loadTemplate('reviews'); into a tab and voila its on every page!

Just find it odd though, firebug not giving an error regarding the script nor is the built in firefox console, really really want to get this running!

OK, if anyone else wants to know I solved my problem, not the greatest fix but it works. It definitely had something to do with jquery easy that stripped out the code, so my little plaster fix I made for it is:

make a js file with the following code

jQuery(function ($){

$(".tabContents").hide();
$(".tabContents:first").show();

$("#tabContainer ul li a").click(function(e){
e.preventDefault();
var activeTab = $(this).attr("href");
$("#tabContainer ul li a").removeClass("active");
$(this).addClass("active");
$(".tabContents").hide();
$(activeTab).fadeIn();
});

});

save it to somewhere you will remember, I put it with my sites template, and then in jquery easy tell it to load that js file when it is loading the page. note that if you dont use the ABSOLUTE FULL path to anything in jquery easy, it wont work.

:)

I would also like to create product tabs for a Real Estate website (To Top, Price, Amenities, Details, Map, Video, etc...) that show specific content from <div> sections within VM2 product description. What would I wrap the <div> text in within the product description and on the php doc to pull that div?

Quote from: major on November 19, 2012, 18:48:34 PM
I there, im trying to use this tab system, i insert the code and is all good but where do i put de description text for the second tab???

First tab- product description from virtuemart product
Second tab - i wont to make another description with dimensions of the product and maybe a image, where to i put this text???
Third tab - maybe some additional info, but same problem where do i put the info???

http://www.mobiliariocomluz.pt/index.php/mobiliario-de-interior/sofas-e-cadeiras-sem-leds/natural-zebra_details.html

Thanks

I used the solution posted by ivus to create tabs but ran into an interesting issue :

When enabling "product navigation" in configuration / shopfront / "show the product navigation" the tabs where not updated after navigating to a new product - the content of the tabs remained the same even when navigating through different products.

To fix this I had to change two lines in my product details default.php :

From :
....['product_name'], array('rel'=>'prev', 'class' => 'previous-page','data-dynamic-update' => '1'));
To :
...['product_name'], array('rel'=>'prev', 'class' => 'previous-page','data-dynamic-update' => '0'));

And

From :
...['product_name'], array('rel'=>'next','class' => 'next-page','data-dynamic-update' => '1'));
To :
...['product_name'], array('rel'=>'next','class' => 'next-page','data-dynamic-update' => '0'));

This forces a full refresh on every new product page load - but I liked the dynamic update thingie better :P.

Wonder if anyone knows a way to make dynamic update work with my tabs?

Cheers

Peter

Okay, trying this in VM3, and i've managed to replicate the Description tab to now add Itinerary, location, terms and photos tabs.

So far so good.

I've created a custom field type "Editor" with the position 'itinerary' but how do i map this to the "ITINERARY" tab?

Here's my code:

<?php
         // event onContentBeforeDisplay
         echo $this->product->event->beforeDisplayContent; ?>

         <div class="products-desc-tab">
            <ul id="myTab" class="nav nav-tabs" role="tablist">
               <?php if (!empty($this->product->product_desc)) { ?>
                   
               <li role="presentation" class="active">
                  <a href="#desc" aria-controls="desc" role="tab" data-toggle="tab">
                     <i class="pe pe-7s-note"></i><?php echo vmText::_('VM_PRODUCT_DESC_TITLE') ?>
                   </a>
               </li>
                <?php } ?>
                    <?php if (!empty($this->product->product_desc)) { ?>
                   
               <li role="presentation">
                  <a href="#itinerary" aria-controls="desc" role="tab" data-toggle="tab">
                     <i class="pe pe-7s-note2"></i><?php echo vmText::_('VM_PRODUCT_ITINERARY_TITLE') ?>
                   </a>
               </li>
                <?php } ?>
                    <?php if (!empty($this->product->product_desc)) { ?>
                   
               <li role="presentation">
                  <a href="#location" aria-controls="desc" role="tab" data-toggle="tab">
                     <i class="pe pe-7s-map-marker"></i><?php echo vmText::_('VM_PRODUCT_LOCATION_TITLE') ?>
                   </a>
               </li>
                <?php } ?>
                    <?php if (!empty($this->product->product_desc)) { ?>
                   
               <li role="presentation">
                  <a href="#desc" aria-controls="desc" role="tab" data-toggle="tab">
                     <i class="pe pe-7s-attention"></i><?php echo vmText::_('VM_PRODUCT_TERMS_TITLE') ?>
                   </a>
               </li>
                <?php } ?>
                    <?php if (!empty($this->product->product_desc)) { ?>
                   
               <li role="presentation">
                  <a href="#desc" aria-controls="desc" role="tab" data-toggle="tab">
                     <i class="pe pe-7s-photo"></i><?php echo vmText::_('VM_PRODUCT_PHOTOS_TITLE') ?>
                   </a>
               </li>
                <?php } // Product Description END ?>
                <li role="presentation">
                    <a href="#review" data-toggle="tab" aria-controls="review" role="tab">
                     <i class="pe pe-7s-like2"></i><?php echo JText::_('VM_PRODUCT_REVIEWS');?>
                 </a>
               </li>
            </ul>
         
            <div class="tab-content">

               <?php if (!empty($this->product->product_desc)) { ?>
                   <div role="tabpanel" class="tab-pane desc fade active in" id="desc">
                      <div class="product-description">
                        <?php /** @todo Test if content plugins modify the product description */ ?>
                        <?php echo $this->product->product_desc; ?>
                      </div>
                   </div>
                <?php } // Product Description END ?>
                <div role="tabpanel" class="tab-pane review" id="review">
                   <?php echo $this->loadTemplate('reviews'); ?>
                       
                 </div>
            </div>
                <div class="clear"></div>
               
         </div> <!--/. products-desc-tab-->
   

And here's the page (demo) : http://www.crunchyfrogpro.com/test/adaevents/index.php/shop/cameras/nikon-d80-detail

Sorry but i'm a bit of a noob when it comes to this :(

K

<?php if (!empty($this->product->customfieldsSorted['itinerary'])) { ?>
<div role="tabpanel" class="tab-pane itinerary" id="itinerary">
<?php 
$this->position='itinerary';
echo $this->loadTemplate('customfields');
?>
</div>
<?php } ?>

Tried that but got a 500 server error. But i think we're close..

Here's the code now:

<?php
// event onContentBeforeDisplay
echo $this->product->event->beforeDisplayContent; ?>

<div class="products-desc-tab">
<ul id="myTab" class="nav nav-tabs" role="tablist">
<?php if (!empty($this->product->product_desc)) { ?>
                   
<li role="presentation" class="active">
<a href="#desc" aria-controls="desc" role="tab" data-toggle="tab">
<i class="pe pe-7s-note"></i><?php echo vmText::_('VM_PRODUCT_DESC_TITLE') ?>
</a>
</li>
    <?php } ?>
                    <?php if (!empty($this->product->product_desc)) { ?>
                   
<li role="presentation">
<a href="#itinerary" aria-controls="itinerary" role="tab" data-toggle="tab">
<i class="pe pe-7s-note2"></i><?php echo vmText::_('VM_PRODUCT_ITINERARY_TITLE') ?>
</a>
</li>
    <?php } ?>
                    <?php if (!empty($this->product->product_desc)) { ?>
                   
<li role="presentation">
<a href="#location" aria-controls="desc" role="tab" data-toggle="tab">
<i class="pe pe-7s-map-marker"></i><?php echo vmText::_('VM_PRODUCT_LOCATION_TITLE') ?>
</a>
</li>
    <?php } ?>
                    <?php if (!empty($this->product->product_desc)) { ?>
                   
<li role="presentation">
<a href="#desc" aria-controls="desc" role="tab" data-toggle="tab">
<i class="pe pe-7s-attention"></i><?php echo vmText::_('VM_PRODUCT_TERMS_TITLE') ?>
</a>
</li>
    <?php } ?>
                    <?php if (!empty($this->product->product_desc)) { ?>
                   
<li role="presentation">
<a href="#desc" aria-controls="desc" role="tab" data-toggle="tab">
<i class="pe pe-7s-photo"></i><?php echo vmText::_('VM_PRODUCT_PHOTOS_TITLE') ?>
</a>
</li>
    <?php } // Product Description END ?>
<li role="presentation">
  <a href="#review" data-toggle="tab" aria-controls="review" role="tab">
   <i class="pe pe-7s-like2"></i><?php echo JText::_('VM_PRODUCT_REVIEWS');?>
  </a>
</li>
</ul>

<div class="tab-content">

<?php if (!empty($this->product->product_desc)) { ?>
    <div role="tabpanel" class="tab-pane desc fade active in" id="desc">
    <div class="product-description">
<?php /** @todo Test if content plugins modify the product description */ ?>
<?php echo $this->product->product_desc; ?>
    </div>
    </div>
    <?php } // Product Description END ?>
                    <?php if (!empty($this->product->customfieldsSorted['itinerary'])) { ?>
    <div role="tabpanel" class="tab-pane itinerary" id="itinerary">
<?php 
$this->position='itinerary';
echo $this->loadTemplate('customfields'); ?>
    </div>
    <?php } ?>
    <div role="tabpanel" class="tab-pane review" id="review">
    <?php echo $this->loadTemplate('reviews'); ?>
                       
</div>
</div>
                <div class="clear"></div>
               
</div> <!--/. products-desc-tab-->
   


I just need the 'itinerary' field to map, and i should be able to sort out the rest by myself..

K

Quote from: K&K media production on January 08, 2017, 14:47:59 PM

Code Select Expand

<?php if (!empty($this->product->customfieldsSorted['itinerary'])) { ?>
<div role="tabpanel" class="tab-pane itinerary" id="itinerary">
<?php 
$this->position='itinerary';
echo $this->loadTemplate('customfields');
?>
</div>
<?php } ?>

I keep getting a 500 Server error with this. Have i done this insert correctly?

<div class="tab-content">

<?php if (!empty($this->product->product_desc)) { ?>
    <div role="tabpanel" class="tab-pane desc fade active in" id="desc">
    <div class="product-description">
<?php /** @todo Test if content plugins modify the product description */ ?>
<?php echo $this->product->product_desc; ?>
    </div>
    </div>
    <?php } // Product Description END ?>
                    <?php if (!empty($this->product->customfieldsSorted['itinerary'])) { ?>
    <div role="tabpanel" class="tab-pane itinerary" id="itinerary">
<?php 
$this->position='itinerary';
echo $this->loadTemplate('customfields'); ?>
    </div>
    <?php } ?>
    <div role="tabpanel" class="tab-pane review" id="review">
    <?php echo $this->loadTemplate('reviews'); ?>
                       
</div>
</div>
                <div class="clear"></div>
               
</div> <!--/. products-desc-tab-->

please look in your error log for the reason

Hi friends,

I am new here and know very few about code, currely I am using Joomla! 3.9.12 + VirtueMart 3.6.2 10159.

I would like to add a "Specification" tab to the page, and hope the tab content can be edited freely like the "Specification" tab (texts, tables, images, etc.), I tried the ways posted before, but failed. Anyone can help me with the code? Thank you.

Below is the original code:



<!-- Nav tabs -->         
<ul id="vm-product-tab" class="nav nav-tabs vm-product-details-tab" role="tablist">
<?php if (!empty($this->product->product_desc)) {  // Product Description title ?>
<li role="vm-tab" class="active">
<a href="#vm-product-description" aria-controls="vm-product-description" role="tab" data-toggle="tab">
<?php echo vmText::_('COM_VIRTUEMART_PRODUCT_DESC_TITLE') ?>
</a>
</li>
<?php } // Product Description END ?>
                                                                       
<li role="vm-tab">
<a href="#vm-product-review" aria-controls="vm-product-review" role="tab" data-toggle="tab">
<?php echo vmText::_('COM_VIRTUEMART_PRODUCT_REVIEW_TITLE') ?>
</a>
</li>                     
                     
<?php // Product Packaging
    $product_packaging = '';
    if ($this->product->product_box) { 
?>
<li role="vm-tab">
<a href="#vm-product-box" aria-controls="vm-product-box" role="tab" data-toggle="tab">
<?php echo vmText::_('COM_VIRTUEMART_PRODUCT_BOX_TITLE') ?>
</a>
</li>
<?php } ?>
                                   
<?php if(isset($this->product->customfields) && $this->product->customfields){ ?>
<li role="vm-tab">
<a href="#vm-product-custom-field" aria-controls="vm-product-custom-field" role="tab" data-toggle="tab">
<?php echo vmText::_('COM_VIRTUEMART_PRODUCT_ADDITIONAL_TITLE') ?>
</a>
</li>
<?php } ?>
             
</ul>

<!-- Tab panes -->
<div class="tab-content">
<?php if (!empty($this->product->product_desc)) {  // Product Description title ?>
<div id="vm-product-description" class="tab-pane active" role="tabpanel">
<?php echo $this->product->product_desc; ?>
</div>
<?php } // Product Description END ?>
                                                       
<div id="vm-product-review" class="tab-pane" role="tabpanel" >
<?php echo $this->loadTemplate('reviews'); ?>
</div>

<?php if ($this->product->product_box) { ?>
<div id="vm-product-box" class="tab-pane product-box" role="tabpanel">
<?php echo vmText::_('COM_VIRTUEMART_PRODUCT_UNITS_IN_BOX') .$this->product->product_box; ?>
</div>
<?php } // Product Packaging END ?>

<?php if(isset($this->product->customfields) && $this->product->customfields){ ?>
<div id="vm-product-custom-field" class="tab-pane" role="tabpanel">
<?php
echo shopFunctionsF::renderVmSubLayout('customfields',array('product'=>$this->product,'position'=>'normal'));
echo shopFunctionsF::renderVmSubLayout('customfields',array('product'=>$this->product,'position'=>'onbot'));
?>
</div>
<?php } ?>
</div> <!-- /. tab-content -->