jQuery css is not working for mobile

Question

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:

jQuery(document).ready(function(e){
 var me = $(this);
 if ( me.data('requestRunning') ) {
 return;
 }
 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){
 $.ajax({
 url: customurl,
 type: 'POST', 
 dataType: 'html',
 showLoader: true,
 data: {
 sku: currentSku1, 
 },
 complete: function(responseData) {
 if (responseData.responseText == 'No Data to display!') {
 jQuery('#tab-label-nutrition').hide();
 } else {
 alert('hi');
 jQuery('#tab-label-nutrition').css('display', 'inline-block');
 }
 $('.nutritionFactsContent').append(responseData.responseText);
 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!

• Keyur Shah: Please try with another CSS property, to just confirm
• Keyur Shah: 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
• Sejal Shah: 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
• Keyur Shah: okay, then just find the proper element for the mobile and apply your css
• Sejal Shah: 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')

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.