same id on desktop and mobile

Question

I have:

1. jumplinks
2. two different designs for desktop and mobile
3. some CSS media query in order to display only one of the designs while the other one is on display: none.

Basically is something like that:

<a href="#my_ID">go to my_ID</a>
<div id="my_ID" class="desktop"> my desktop content</div>
<div id="my_ID" class="mobile"> my mobile content</div>

It works fine for the design, but the jumping only works partly: The browser always wants to jump to the first ID, if the first ID is not displayed the browser does nothing. (I thought it will jump to the second one that is displayed.)

Is there any solution for that problem like adding the IDs dynamically with jQuery or some other workaround?

Thanks in advance

Answer 1

ID's can only be used once per html page.

The anchor should be different for desktop and mobile if one is hidden depending on the user's display.

/* Medium screens and larger - example */
@media only screen and (min-width: 40.063em) {
  a[href="#my_mobile_ID"],
  #my_mobile_ID {
    display: none;
  }
}


/* small screens - example */
@media only screen and (max-width: 40em) {
  a[href="#my_desktop_ID"],
  #my_desktop_ID {
    display: none;
  }
}

#my_desktop_ID {
  background: lime;
  width: 300px;
  height: 400px;
}

#my_mobile_ID {
  background: cyan;
  width: 300px;
  height: 400px;
}

<a href="#my_desktop_ID">go to my_desktop_ID</a>
<a href="#my_mobile_ID">go to my_mobile_ID</a>
<div id="my_desktop_ID" class="desktop"> my desktop content</div>
<div id="my_mobile_ID" class="mobile"> my mobile content</div>

Answer 2

I changed the href of the links on mobile with some jquery, now I can use two different IDs. It goes like that:

if ($(window).width() < 767){       
        $("a[href='my_URL']").attr('href',  'my_URL_mobile');
}