2
\$\begingroup\$

I have created a reusable code for jQuery tab functionality for my client site.

Every thing works fine but the only thing I am worried is that the lines code I have written for this small feature is very high. Can any one help me to shrink lines of code or any suggestions.

Here is my JavaScript code:

/**
 * @param link Class name of the tab header
 * @param content Class name of the element
 * @param current should be class name of the element which you want to show in the begin
 * @example _initTab('.tab-link','.tab-content','.first-tab-content-id')
 */
function _initTab(link, content, current) {
    var tabLink = link || '.tab-link';
    var tabContent = content || '.tab-content';
    var elementId = current || null; //Clicked element

    //In the begin hide all the tabs
    $(tabContent).addClass('hide');

    function animateIcon() {
        var iconElement = $(tabLink).find('.icon');
        var addClassName = iconElement.hasClass('sz-icon-arrow-right') ? 'sz-icon-arrow-down' : 'sz-icon-arrow-right';
        var removeClassName = iconElement.hasClass('sz-icon-arrow-right') ? 'sz-icon-arrow-right' : 'sz-icon-arrow-down';
        iconElement.removeClass(removeClassName).addClass(addClassName);
    }

    function showElement(elId) {
        animateIcon();
        $(tabContent).addClass('hide');
        $(elId).removeClass('hide');
    }

    //If any tab-content needs to be opened in the begin
    if (elementId) {
        showElement(elementId);
    }

    //Bind click events for the tab
    $(document).on('click', tabLink, function () {
        elementId = $(this).data('element');
        showElement(elementId);
    });
}

My HTML will look something like this:

<div class="tab-wrapper">
    <h3 class="tab-link" data-element=".credit-card-sec">
        Credit Card
        <span class="icon sz-icon-arrow-right"></span>
    </h3>
    <div class="tab-content credit-card-sec">
        <div class="credit-card-form">
            Credit card form elements
        </div>
    </div>
    <h3 class="tab-link" data-element=".debit-card-sec">
        Credit Card
        <span class="icon sz-icon-arrow-right"></span>
    </h3>
    <div class="tab-content debit-card-sec">
        <div class="debit-card-form">
            Debit card form elements
        </div>
    </div> 
</div>
\$\endgroup\$

migrated from stackoverflow.com Dec 30 '15 at 11:58

This question came from our site for professional and enthusiast programmers.

  • \$\begingroup\$ Just one suggestion you can put the event delegation out of your function. as it would get registred on every call. \$\endgroup\$ – Jai Dec 18 '15 at 13:12
  • \$\begingroup\$ @Rajesh Thanks man I will ask Question there :) \$\endgroup\$ – Suresh Pattu Dec 18 '15 at 13:12
  • \$\begingroup\$ @SureshPattu just a simple feedback. If you are creating plugin sort of thing, try not to use jQuery. This will add jQuery's dependency for anyone who wants to use code. Also number of lines should not matter much if you minify code. \$\endgroup\$ – Rajesh Dec 18 '15 at 13:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.