<!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%
}
.otv>div{
display: none;
}
.act{
color: red;
}
</style>
</head>
<body>
<div class="block">
<div class="vopr">
<div>Вопрос 1</div>
<div>Вопрос 2</div>
<div>Вопрос 3</div>
<div>Вопрос 4</div>
</div>
<div class="otv">
<div>Ответ 1</div>
<div>Ответ 2</div>
<div>Ответ 3</div>
<div>Ответ 4</div>
</div>
</div>
<script>
var elt = document.querySelectorAll(".vopr > div");
[].forEach.call(elt, function(el, i){
el.onclick = function(e){
[].forEach.call(elt, function(el, n){
el.className = n==i?'act':'';
});
[].forEach.call(document.querySelectorAll(".otv > div"), function(el, n){
el.style.display = n==i?'block':'none';
});
};
});
</script>
</body>
</html>