Referring to my question here: Magento 2 Add custom tab to product details page conditionally

As suggested in the answer, I am trying to hide the custom tab if response is "No Data to display!".

Here is my code:

                        var me = $(this);
                        if ( me.data('requestRunning') ) {
                        me.data('requestRunning', true);
                        //$(document).on('click', '#tab-label-nutrition', function() {
                                    var customurl = "<?php echo $this->getUrl('nutrition/nutrition/index') ?>";
                                    var currentSku1 = '<?php echo $currentSku; ?>';
                                    if(currentSku1 && $(".nutritionFactsContent").children().length == 0){
                                                    url: customurl,
                                                    type: 'POST',                       
                                                    dataType: 'html',
                                                    showLoader: true,
                                                    data: {
                                                            sku: currentSku1,                    
                                                    complete: function(responseData) {
                            if (responseData.responseText == 'No Data to display!') {
                            } else {
                                jQuery('#tab-label-nutrition').css('display', 'inline-block');
                            console.log('ajax completed');
                            me.data('requestRunning', false);
                        error: function (xhr, status, errorThrown) {
                            console.log('Error happens. Try again.');
                //});//click event

This works well on desktop. However does not work on mobile devices. The alert in the else part is executed though just the css is not applied.

Any help would be appreciated!

  • Please try with another CSS property, to just confirm
    – Keyur Shah
    Commented Aug 29, 2017 at 11:14
  • Yes I mean try to apply another css(like background color or color) in mobile device to just confirm like jQuery('#tab-label-nutrition').css('background-color', 'red'); , if its works for you not
    – Keyur Shah
    Commented Aug 29, 2017 at 11:19
  • I figured out something. I have 2 different divs for desktop and mobile view. (desktop-details and mobile-details respectively) The css is applied for the first occurrence of #tab-label-nutrition i.e div under desktop-details
    – Sejal Shah
    Commented Aug 29, 2017 at 11:26
  • okay, then just find the proper element for the mobile and apply your css
    – Keyur Shah
    Commented Aug 29, 2017 at 11:27
  • That did the trick. Added jQuery('.mobile-detail #tab-label-nutrition').css('display', 'inline-block'); However I don't understand why this did not work jQuery('#tab-label-nutrition').css('display', 'inline-block');
    – Sejal Shah
    Commented Aug 29, 2017 at 11:41

1 Answer 1


As per the comments above , In mobile view Id can be change of the element so try to add another css property into element and check, it will help you.

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.