<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul li{
display: inline-block;
padding: 15px;
border: 1px solid #dadada;
}
.block {display: none}
.vis {display: block}
</style>
</head>
<body>
<ul>
<li id="bl1" divid="b1" onclick="func(this)">Текст</li>
<li id="bl2" divid="b2" onclick="func(this)">текст</li>
<li id="bl3" divid="b3" onclick="func(this)">Текст</li>
</ul>
<div class="block" id="b1">
<p> Первый <br>
Lorem ipsum dolor sit amet.
Quis recusandae inventore sequi iusto?
Autem atque perferendis asperiores doloremque.
</p>
<img src="https://images.pexels.com/photos/50631/pexels-photo-50631.jpeg?auto=compress&cs=tinysrgb&h=350" alt="" srcset="" width="150">
</div>
<div class="block" id="b2">
<p> Второй<br>
Lorem ipsum dolor sit amet.
Quis recusandae inventore sequi iusto?
Autem atque perferendis asperiores doloremque
</p>
<img src="https://images.pexels.com/photos/50632/pexels-photo-50632.jpeg?auto=compress&cs=tinysrgb&h=350" alt="" srcset="" width="150">
</div>
<div class="block" id="b3">
<p> Третий<br>
Lorem ipsum dolor sit amet.
Quis recusandae inventore sequi iusto?
Autem atque perferendis asperiores doloremque
</p>
<img src="https://images.pexels.com/photos/940880/pexels-photo-940880.jpeg?auto=compress&cs=tinysrgb&h=350" alt="" srcset="" width="150">
</div>
<script>
var func = (obj) =>{
var el = document.getElementsByClassName('block');
for ( let i = 0; i < el.length; i++){
el[i].classList.remove('vis');
}
document.getElementById(obj.getAttribute('divid')).classList.add('vis');
}
</script>
</body>
</html>
