cross-browser (tablet) bug with radio buttons - html

Question

I asked a similar question already, but I'm still having this problem.
The website I made has a bug on tablets. The different content sections don't display properly on tablets - things overlap. The Google Maps iframe, for instance, shows upon page load, not upon clicking on the corresponding radio button (label!). This only happens on tablets.
After some deep thinking, I found that the radio buttons are probably the culprit. On desktops everything looks A-OK.
Sorry, I can't make a JSfiddle to reproduce the tablet issue (help is explicitly sought only from those who can use dev tools, take a quick look and maybe point me to what needs to be done in order to make it work on tablets, in short only from real badass cross-browser Chucknorisses).
Help would be much, much appreciated!
UPDATE:
The radio-buttons I'm talking about are 'design-hidden' to only keep labels as visible / clickable elements.
The code looks like this (this would be the yellow 'home' button):
<div class="mx-button" id="real_button5">
<input type="radio" name="mx" id="button5" checked>
<label for="button5" onclick="" style="background-color: rgba(255,216,0,1);">HOME</label>
</div>
It seems that on tablets, these buttons are clickable (something happens), but they don't unhide the correct content. Things overlap.

Answer 1

As you are already using jQuery within your project I built a small example fiddle for you. Th concept behind it is the following:
All menu buttons have the class menubutton. This gives you the possibility to style the buttons but allows you additionally to use a jQuery selector on them. Further I gave each button a value attribute. This attribute represents the id of the content div which should be shown.
The content divs also have a common class content and an id correspondig to the vlaue attributes above.
<button class="menubutton" value="content1">item1</button>
<button class="menubutton" value="content2">item2</button>
<button class="menubutton" value="content3">item2</button>
<div class="content" id="content1">Content 1</div>
<div class="content" id="content2">Content 2</div>
<div class="content" id="content3">Content 3</div>
Now I use CSS to hide all content divs by default:
.content {
display:none;
}
The JavaScript part is also not that complicated. I add a click-function to each element with the class menubutton. This is done with a jQuery selector. Now all content divs are selected by $(".content") and I hide them with hide().
this.value is the value attribute of the button you clicked on and is used to show this specific content div.
$('.menubutton').click( function() {
$(".content").hide();
$("#" + this.value).show();
});
I hope this shows you some of the jQuery possibilities.
UPDATE
As you want to use divs instead of buttons I made some changes on the example you can see them in this fiddle.
I changed from buttons to divs and added an id to each content div like the following:
<div class="menubutton" id="content1">item1</div>
<div class="menubutton" id="content2">item2</div>
<div class="menubutton" id="content3">item2</div>
<div class="content" id="show_content1">Content 1</div>
<div class="content" id="show_content2">Content 2</div>
<div class="content" id="show_content3">Content 3</div>
the id of content div matches the id of its navigation div plus a standard prefix. show_ in my example. The JS Code was updated to use the id, instead of the value property to find the desired content div:
$('.menubutton').click( function() {
$(".content").hide();
$("#show_" + this.id).show();
});
UPDATE II
To show one content div by default, you can add another css class to this div (see updated fiddle)
<div class="content default_content" id="show_content1">Content 1</div>
I added this corresponding class to the CSS file:
.default_content {
display:block;
}