<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.block{
width: 100%;
}
.block>div{
position: relative;
float: left;
width: 50%;
}
.vopr > div.act{
color: red;
}
.vopr > div{
cursor: pointer;
}
.otv > div{
display: none;
}
.otv > div.act{
display: block;
}
</style>
</head>
<body>
<div class="block">
<div class="vopr">
<div class="act">Вопрос 1</div>
<div>Вопрос 2</div>
<div>Вопрос 3</div>
<div>Вопрос 4</div>
</div>
<div class="otv">
<div class="act">Ответ 1</div>
<div>Ответ 2</div>
<div>Ответ 3</div>
<div>Ответ 4</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var a = 0,
b = document.querySelectorAll(".vopr > div"),
c = document.querySelectorAll(".otv > div");
[].forEach.call(b, function(d, e) {
d.addEventListener("click", function(f) {
b[a].classList.remove("act");
c[a].classList.remove("act");
d.classList.add("act");
a = e;
c[a].classList.add("act")
})
})
});
</script>
</body>
</html>