0

The lower bar on the frontend that contains description, additional information, and Reviews tab is not click-able.

How do I fix this? As I do not know where to start.

This is what my app.js shows under this heading.

// ============================================== // UI Pattern - Toggle Content (tabs and accordions in one setup) // ==============================================

$j('.toggle-content').each(function () {
    var wrapper = jQuery(this);

    var hasTabs = wrapper.hasClass('tabs');
    var hasAccordion = wrapper.hasClass('accordion');
    var startOpen = wrapper.hasClass('open');

    var dl = wrapper.children('dl:first');
    var dts = dl.children('dt');
    var panes = dl.children('dd');
    var groups = new Array(dts, panes);

    //Create a ul for tabs if necessary.
    if (hasTabs) {
        var ul = jQuery('<ul class="toggle-tabs"></ul>');
        dts.each(function () {
            var dt = jQuery(this);
            var li = jQuery('<li></li>');
            li.html(dt.html());
            ul.append(li);
        });
        ul.insertBefore(dl);
        var lis = ul.children();
        groups.push(lis);
    }

    //Add "last" classes.
    var i;
    for (i = 0; i < groups.length; i++) {
        groups[i].filter(':last').addClass('last');
    }

    function toggleClasses(clickedItem, group) {
        var index = group.index(clickedItem);
        var i;
        for (i = 0; i < groups.length; i++) {
            groups[i].removeClass('current');
            groups[i].eq(index).addClass('current');
        }
    }

    //Toggle on tab (dt) click.
    dts.on('click', function (e) {
        //They clicked the current dt to close it. Restore the wrapper to unclicked state.
        if (jQuery(this).hasClass('current') && wrapper.hasClass('accordion-open')) {
            wrapper.removeClass('accordion-open');
        } else {
            //They're clicking something new. Reflect the explicit user interaction.
            wrapper.addClass('accordion-open');
        }
        toggleClasses(jQuery(this), dts);
    });

    //Toggle on tab (li) click.
    if (hasTabs) {
        lis.on('click', function (e) {
            toggleClasses(jQuery(this), lis);
        });
        //Open the first tab.
        lis.eq(0).trigger('click');
    }

    //Open the first accordion if desired.
    if (startOpen) {
        dts.eq(0).trigger('click');
    }

});
2

1 Answer 1

0

You have a problem with your javascript. See 'app.js' with this line:

dts.on('click', function (e) {

On its own that is not much of a clue, however, if you see this question, chances are that you have the same problem - namely that the jQuery library is not being loaded properly with 'no conflict':

Unable to use jQuery

1
  • I updated my question with my app.js file where this question is located @woolfie Commented Mar 3, 2015 at 16:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.