Easy Responsive Tabs Plugin: Author: Samson.Onna need some modification - tabs

Question

Please help me i implemented this js but I have problem when I call an event body click the tab content will also hide...
I used this code but problem is when i click on tab button its already hide..
$('body').click(function(e){
$('.resp-tabs-container').hide();
});
My HTML FILE
<div id="verticalTab">
<ul class="resp-tabs-list">
<li class="first flights"><em class="sprite"> </em>Book a Flight</li>
<li class="rooms"><em class="sprite"> </em>Book Hotel Rooms</li>
<li class="tickets"><em class="sprite"> </em>Book Movie Tickets</li>
<li class="vouchers"><em class="sprite"> </em>Book Vouchers</li>
<li class="new"><em class="sprite"> </em>What's New</li>
</ul>
<div class="resp-tabs-container">
<!--Book A Flight-->
<div>
<div class="tabForm">
<form action="">
<fieldset>
<div class="rowG select-opt flatui">
<p>
<input type="radio" name="tripOpt" checked="checked" />
<label>One Way</label>
<input type="radio" name="tripOpt" />
<label>Round Trip</label>
<input type="radio" name="tripOpt" />
<label>Multiple Destinations</label>
</p>
</div>
<div class="rowG clearfix">
<div class="col">
<label>Leaving From</label>
<input type="text" class="field" value="Location">
</div>
<div class="col">
<label>Departure Date</label>
<input type="text" class="field date-field" value="DD/MM/YY">
</div>
<div class="col selectdd">
<label>Time</label>
<select>
<option>Any</option>
</select>
</div>
</div>
<div class="rowG clearfix">
<div class="col">
<label>Going To</label>
<input type="text" class="field" value="Location">
</div>
</div>
<div class="rowG clearfix">
<div class="col selectdd">
<label>Adult (18-64)</label>
<select>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="col selectdd">
<label>Seniors (65+)</label>
<select>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="col selectdd">
<label>Children</label>
<select>
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="rowG clearfix"> <a data-toggle="collapse" data-target="#showAdditionalData" id="showAdditional" class="i-arrowup" href="#">Show Additional Options<span id="toggler" class="icon-chevron-left" ></span></a>
<div class="contents addpaddingT10">
<div id="showAdditionalData" class="collapse">
<div class="col">
<label>Preferred Airline</label>
<select>
<option>No Preference</option>
</select>
<p class="addpaddingT10">
<div class="flatui">
<input type="checkbox"/><label>Nonstop Flights Only</label>
</div>
</p>
</div>
<div class="col">
<label>Class</label>
<select>
<option>First Class</option>
</select>
<p class="addpaddingT10">
<div class="flatui">
<input type="checkbox"/><label>Refundable Flights Only</label>
</div>
</p>
</div>
</div>
</div>
</div>
<div class="rowG last clearfix">
<p class="floatL">
<div class="flatui">
<input type="checkbox"/><label>Redeem PR Points for this booking</label>
</div>
<input type="button" class="btn btn-primary search-icon floatR" value="Search">
</div>
</fieldset>
</form>
</div>
</div>
<!--End Flight book-->
<!--Hotel booking-->
<div>
<div class="tabFormHotel">
<form action="">
<fieldset>
<div class="rowG">
<label>Destination, hotel, landmark or address</label>
<input type="text" class="large" value="A city, airport or attraction">
</div>
<div class="rowG clearfix">
<div class="col">
<label>Check In</label>
<input type="text" class="field date-field" value="DD/MM/YYYY">
</div>
<div class="col">
<label>Check Out</label>
<input type="text" class="field date-field" value="DD/MM/YYYY">
</div>
<div class="col">
<label>Rooms</label>
<select class="selectpicker">
<option>Any</option>
</select>
</div>
</div>
<div class="rowG clearfix selectdd">
<legend>Room 1</legend>
<div class="c1">
<label>Adult <span>(12+ years)</span></label>
<select>
<option>1</option>
</select>
</div>
<div class="c1 selectdd">
<label>Child <span>(2-11 years)</label>
<select>
<option>3</option>
</select>
</div>
<div class="c2 selectdd">
<label>Child 1 Age</label>
<select>
<option>2</option>
</select>
</div>
<div class="c2 selectdd">
<label>Child 2 Age</label>
<select>
<option>6</option>
</select>
</div>
<div class="c2 selectdd">
<label>Child 3 Age</label>
<select>
<option>8</option>
</select>
</div>
</div>
<div class="rowG last clearfix">
<p class="floatL">
<input type="checkbox" />
<label>Redeem PR Points for this booking</label>
<br/>
<input type="button" class="btn btn-primary search-icon floatR" value="Search">
</p>
</div>
</fieldset>
</form>
</div>
</div>
<!--End Hotel-->
<div>
<p>Book Movie Tickets</p>
</div>
<div>
<p>Book Vouchers</p>
</div>
<div>
<p>What's New</p>
</div>
</div>
</div>
Here is the JS which i used
(function ($) {
$.fn.extend({
easyResponsiveTabs: function (options) {
//Set the default values, use comma to separate the settings, example:
var defaults = {
type: 'default', //default, vertical, accordion;
width: 'auto',
fit: true
}
//Variables
var options = $.extend(defaults, options);
var opt = options, jtype = opt.type, jfit = opt.fit, jwidth = opt.width, vtabs = 'vertical', accord = 'accordion';
//Main function
this.each(function () {
var $respTabs = $(this);
$respTabs.find('ul.resp-tabs-list li').addClass('resp-tab-item');
$respTabs.css({
'display': 'block',
'width': jwidth
});
$respTabs.find('.resp-tabs-container > div').addClass('resp-tab-content');
jtab_options();
//Properties Function
function jtab_options() {
if (jtype == vtabs) {
$respTabs.addClass('resp-vtabs');
}
if (jfit == true) {
$respTabs.css({ width: '100%', margin: '0px' });
}
if (jtype == accord) {
$respTabs.addClass('resp-easy-accordion');
$respTabs.find('.resp-tabs-list').css('display', 'none');
}
}
//Assigning the h2 markup to accordion title
var $tabItemh2;
$respTabs.find('.resp-tab-content').before("<h2 class='resp-accordion' role='tab'><span class='resp-arrow'></span></h2>");
var itemCount = 0;
$respTabs.find('.resp-accordion').each(function () {
$tabItemh2 = $(this);
var innertext = $respTabs.find('.resp-tab-item:eq(' + itemCount + ')').html();
$respTabs.find('.resp-accordion:eq(' + itemCount + ')').append(innertext);
$tabItemh2.attr('aria-controls', 'tab_item-' + (itemCount));
itemCount++;
});
//Assigning the 'aria-controls' to Tab items
var count = 0,
$tabContent;
$respTabs.find('.resp-tab-item').each(function () {
$tabItem = $(this);
$tabItem.attr('aria-controls', 'tab_item-' + (count));
$tabItem.attr('role', 'tab');
//First active tab
// $respTabs.find('.resp-tab-item').first().addClass('resp-tab-active');
//$respTabs.find('.resp-accordion').first().addClass('resp-tab-active');
//$respTabs.find('.resp-tab-content').first().addClass('resp-tab-content-active').attr('style', 'display:block');
//Assigning the 'aria-labelledby' attr to tab-content
var tabcount = 0;
$respTabs.find('.resp-tab-content').each(function () {
$tabContent = $(this);
$tabContent.attr('aria-labelledby', 'tab_item-' + (tabcount));
tabcount++;
});
count++;
});
//Tab Click action function
$respTabs.find("[role=tab]").each(function () {
var $currentTab = $(this);
$currentTab.click(function () {
var $tabAria = $currentTab.attr('aria-controls');
if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) {
$respTabs.find('.resp-tab-content-active').slideUp('', function () { $(this).addClass('resp-accordion-closed'); });
$respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
return false;
}
if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) {
$respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
$respTabs.find('.resp-tab-content-active').slideUp().removeClass('resp-tab-content-active resp-accordion-closed');
$respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
$respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').slideDown().addClass('resp-tab-content-active');
} else {
$respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
$respTabs.find('.resp-tab-content-active').removeAttr('style').removeClass('resp-tab-content-active').removeClass('resp-accordion-closed');
$respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
$respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').addClass('resp-tab-content-active').attr('style', 'display:block');
}
});
//Window resize function
$(window).resize(function () {
$respTabs.find('.resp-accordion-closed').removeAttr('style');
});
});
});
}
});

Answer 1

just use the follwing javascript to prevent the clicks
<script type="text/javascript">
$(document).ready(function() {
$("body").click(function(e){
if (!$(e.target).is('.ui-datepicker,.ui-datepicker *,.ui-icon,.ui-autocomplete,.ui-autocomplete *,.resp-tab-active, .resp-tab-active *, #verticalTab, #verticalTab *')) {
//$(".resp-tabs-container").hide();
$(".resp-vtabs li").removeClass('resp-tab-active');
$(".resp-vtabs .resp-tabs-container .resp-tab-content-active").removeClass('resp-tab-content-active').hide();
}});
});
</script>