function mobileView() {
if ($(window).width() < 767) {
if ($('#teaser #ai').length) {
$('#ai').find('.icon-wrp').html(`<div class='icon-wrp'><span aria-hidden='true' role='img' class='custom-icons'>icon2-1</span></div>`);
}
if ($('.teaser #as').length) {
$('#as').find('.icon-wrp').html(`<div class='icon-wrp'><span aria-hidden='true' role='img' class='custom-icons'>icon2-2</span></div>`);
}
// AD product condition check
if ($('.teaser #ad').length) {
$('#ad').find('.icon-wrp').html(`<div class='icon-wrp'><span aria-hidden='true' role='img' class='custom-icons'>icon2-3</span></div>`);
}
} else {
// will trigger for desktop device
if ($('.teaser #ad').length) {
$('#ad').find('span').text('icon1-1');
}
if ($('.teaser #as').length) {
$('#as').find('span').text('icon1-2');
}
if ($('.teaser #ai').length) {
$('#ai').find('span').text('icon1-3');
}
}
}
$(document).ready(function(){
mobileView();
)};<div class='icon-wrp'>
<span aria-hidden='true' role='img' class='custom-icons'>icon1-1</span></div>
<div class='icon-wrp'>
<span aria-hidden='true' role='img' class='custom-icons'>icon1-2</span></div>
<div class='icon-wrp'>
<span aria-hidden='true' role='img' class='custom-icons'>icon1-3</span></div>For the Desktop view, at the particular position, I've put let's say icon-1 and for the mobile view, there is icon-2. When I move from desktop to mobile view to test from chrome browser, at first icon-1 shows up, and after reloading icon-2 shows up. Also, if I open the URL directly in mobile view only, it's working fine.
I write HTML for the desktop view and the mobile view I used Javascript if the window width <= 767, I changed the logo using the innerHTML.
Expecting - In the mobile view it should be icon-1 and when I change the view to mobile it should change to icon-2 without reloading the page.