PonyS,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hot {
display: none;
}
.hot.open {
display: block;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var div = document.querySelectorAll(".hot"),
f = document.querySelectorAll("[name='f']"),
fa = document.querySelectorAll("[name='fa']");
temp = div[0];
[].forEach.call(f, function(item, i) {
item.addEventListener('click', function() {
temp.classList.remove("open")
div[i].classList.add("open");
temp = div[i];
fa[i].checked = true;
});
fa[i].addEventListener('click', function() {
temp.classList.remove("open")
div[i].classList.add("open");
temp = div[i];
f[i].checked = true;
});
});
});
</script>
</head>
<body>
<style type="text/css">
.hot{
border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px
}
</style>
<input name="f" type="radio" >
<input name="f" type="radio" >
<input name="f" type="radio" >
<input name="fa" type="radio" >
<input name="fa" type="radio" >
<input name="fa" type="radio" >
<div class="hot open" >0</div>
<div class="hot" >1</div>
<div class="hot" >2</div>
</body>
</html>