Databases
StackOverflow2013
Postsdbo
POEasy Responsive Tabs Plugin: Author: Samson.Onna need some modification
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POEasy Responsive Tabs Plugin: Author: Samson.Onna need some modification
    text
    copied!<h1>Please help me i implemented this js but I have problem when I call an event body click the tab content will also hide...</h1> <p>I used this code but problem is when i click on tab button its already hide..</p> <pre><code> $('body').click(function(e){ $('.resp-tabs-container').hide(); }); </code></pre> <h2>My HTML FILE</h2> <pre><code>&lt;div id="verticalTab"&gt; &lt;ul class="resp-tabs-list"&gt; &lt;li class="first flights"&gt;&lt;em class="sprite"&gt;&amp;nbsp;&lt;/em&gt;Book a Flight&lt;/li&gt; &lt;li class="rooms"&gt;&lt;em class="sprite"&gt;&amp;nbsp;&lt;/em&gt;Book Hotel Rooms&lt;/li&gt; &lt;li class="tickets"&gt;&lt;em class="sprite"&gt;&amp;nbsp;&lt;/em&gt;Book Movie Tickets&lt;/li&gt; &lt;li class="vouchers"&gt;&lt;em class="sprite"&gt;&amp;nbsp;&lt;/em&gt;Book Vouchers&lt;/li&gt; &lt;li class="new"&gt;&lt;em class="sprite"&gt;&amp;nbsp;&lt;/em&gt;What's New&lt;/li&gt; &lt;/ul&gt; &lt;div class="resp-tabs-container"&gt; &lt;!--Book A Flight--&gt; &lt;div&gt; &lt;div class="tabForm"&gt; &lt;form action=""&gt; &lt;fieldset&gt; &lt;div class="rowG select-opt flatui"&gt; &lt;p&gt; &lt;input type="radio" name="tripOpt" checked="checked" /&gt; &lt;label&gt;One Way&lt;/label&gt; &lt;input type="radio" name="tripOpt" /&gt; &lt;label&gt;Round Trip&lt;/label&gt; &lt;input type="radio" name="tripOpt" /&gt; &lt;label&gt;Multiple Destinations&lt;/label&gt; &lt;/p&gt; &lt;/div&gt; &lt;div class="rowG clearfix"&gt; &lt;div class="col"&gt; &lt;label&gt;Leaving From&lt;/label&gt; &lt;input type="text" class="field" value="Location"&gt; &lt;/div&gt; &lt;div class="col"&gt; &lt;label&gt;Departure Date&lt;/label&gt; &lt;input type="text" class="field date-field" value="DD/MM/YY"&gt; &lt;/div&gt; &lt;div class="col selectdd"&gt; &lt;label&gt;Time&lt;/label&gt; &lt;select&gt; &lt;option&gt;Any&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="rowG clearfix"&gt; &lt;div class="col"&gt; &lt;label&gt;Going To&lt;/label&gt; &lt;input type="text" class="field" value="Location"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="rowG clearfix"&gt; &lt;div class="col selectdd"&gt; &lt;label&gt;Adult (18-64)&lt;/label&gt; &lt;select&gt; &lt;option&gt;1&lt;/option&gt; &lt;option&gt;2&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="col selectdd"&gt; &lt;label&gt;Seniors (65+)&lt;/label&gt; &lt;select&gt; &lt;option&gt;1&lt;/option&gt; &lt;option&gt;2&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="col selectdd"&gt; &lt;label&gt;Children&lt;/label&gt; &lt;select&gt; &lt;option&gt;1&lt;/option&gt; &lt;option&gt;2&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="rowG clearfix"&gt; &lt;a data-toggle="collapse" data-target="#showAdditionalData" id="showAdditional" class="i-arrowup" href="#"&gt;Show Additional Options&lt;span id="toggler" class="icon-chevron-left" &gt;&lt;/span&gt;&lt;/a&gt; &lt;div class="contents addpaddingT10"&gt; &lt;div id="showAdditionalData" class="collapse"&gt; &lt;div class="col"&gt; &lt;label&gt;Preferred Airline&lt;/label&gt; &lt;select&gt; &lt;option&gt;No Preference&lt;/option&gt; &lt;/select&gt; &lt;p class="addpaddingT10"&gt; &lt;div class="flatui"&gt; &lt;input type="checkbox"/&gt;&lt;label&gt;Nonstop Flights Only&lt;/label&gt; &lt;/div&gt; &lt;/p&gt; &lt;/div&gt; &lt;div class="col"&gt; &lt;label&gt;Class&lt;/label&gt; &lt;select&gt; &lt;option&gt;First Class&lt;/option&gt; &lt;/select&gt; &lt;p class="addpaddingT10"&gt; &lt;div class="flatui"&gt; &lt;input type="checkbox"/&gt;&lt;label&gt;Refundable Flights Only&lt;/label&gt; &lt;/div&gt; &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="rowG last clearfix"&gt; &lt;p class="floatL"&gt; &lt;div class="flatui"&gt; &lt;input type="checkbox"/&gt;&lt;label&gt;Redeem PR Points for this booking&lt;/label&gt; &lt;/div&gt; &lt;input type="button" class="btn btn-primary search-icon floatR" value="Search"&gt; &lt;/div&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;!--End Flight book--&gt; &lt;!--Hotel booking--&gt; &lt;div&gt; &lt;div class="tabFormHotel"&gt; &lt;form action=""&gt; &lt;fieldset&gt; &lt;div class="rowG"&gt; &lt;label&gt;Destination, hotel, landmark or address&lt;/label&gt; &lt;input type="text" class="large" value="A city, airport or attraction"&gt; &lt;/div&gt; &lt;div class="rowG clearfix"&gt; &lt;div class="col"&gt; &lt;label&gt;Check In&lt;/label&gt; &lt;input type="text" class="field date-field" value="DD/MM/YYYY"&gt; &lt;/div&gt; &lt;div class="col"&gt; &lt;label&gt;Check Out&lt;/label&gt; &lt;input type="text" class="field date-field" value="DD/MM/YYYY"&gt; &lt;/div&gt; &lt;div class="col"&gt; &lt;label&gt;Rooms&lt;/label&gt; &lt;select class="selectpicker"&gt; &lt;option&gt;Any&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="rowG clearfix selectdd"&gt; &lt;legend&gt;Room 1&lt;/legend&gt; &lt;div class="c1"&gt; &lt;label&gt;Adult &lt;span&gt;(12+ years)&lt;/span&gt;&lt;/label&gt; &lt;select&gt; &lt;option&gt;1&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="c1 selectdd"&gt; &lt;label&gt;Child &lt;span&gt;(2-11 years)&lt;/label&gt; &lt;select&gt; &lt;option&gt;3&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="c2 selectdd"&gt; &lt;label&gt;Child 1 Age&lt;/label&gt; &lt;select&gt; &lt;option&gt;2&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="c2 selectdd"&gt; &lt;label&gt;Child 2 Age&lt;/label&gt; &lt;select&gt; &lt;option&gt;6&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="c2 selectdd"&gt; &lt;label&gt;Child 3 Age&lt;/label&gt; &lt;select&gt; &lt;option&gt;8&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="rowG last clearfix"&gt; &lt;p class="floatL"&gt; &lt;input type="checkbox" /&gt; &lt;label&gt;Redeem PR Points for this booking&lt;/label&gt; &lt;br/&gt; &lt;input type="button" class="btn btn-primary search-icon floatR" value="Search"&gt; &lt;/p&gt; &lt;/div&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;!--End Hotel--&gt; &lt;div&gt; &lt;p&gt;Book Movie Tickets&lt;/p&gt; &lt;/div&gt; &lt;div&gt; &lt;p&gt;Book Vouchers&lt;/p&gt; &lt;/div&gt; &lt;div&gt; &lt;p&gt;What's New&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <h2>Here is the JS which i used</h2> <pre><code>(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 &gt; 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("&lt;h2 class='resp-accordion' role='tab'&gt;&lt;span class='resp-arrow'&gt;&lt;/span&gt;&lt;/h2&gt;"); 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') &amp;&amp; $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') &amp;&amp; $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'); }); }); }); } }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload