How can I make such a list?

I faced the challenge to finish this list
https://pp.userapi.com/c849132/v849132519/2c3e0/pN...
Then just go in a number of units, by clicking on each, you must change the block below to the appropriate
Please tell me how to achieve this?
June 3rd 19 at 19:19
2 answers
June 3rd 19 at 19:21
By clicking change background-image or src images lower block on the one clicked.
And how should it be fixed? And text, too, needs to change, as I understand it, I have a simple transparent blocks in the absolute there, and when you click all but one must become visible, but how should it be fixed? - Pascale_Dic commented on June 3rd 19 at 19:24
an example of "on the knee" to understand the logic https://jsfiddle.net/yz65qna3/6/ - Dominic_Ja commented on June 3rd 19 at 19:27
June 3rd 19 at 19:23
Can clumsy ( . for that ), but you can do so




 <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>


the <ul>
 <li id="bl1" divid="b1" onclick="func(this)">Text</li>
 <li id="bl2" divid="b2" onclick="func(this)">text</li>
 <li id="bl3" divid="b3" onclick="func(this)">Text</li>
</ul>

 <div class="block" id="b1">
 <p> First <br>
 Lorem ipsum dolor sit amet.
 Quis recusandae inventore sequi iusto?
 Autem asperiores doloremque perferendis atque.
</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> Second<br>
 Lorem ipsum dolor sit amet.
 Quis recusandae inventore sequi iusto?
 Autem perferendis atque 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> Third<br>
 Lorem ipsum dolor sit amet.
 Quis recusandae inventore sequi iusto?
 Autem perferendis atque 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>
the <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>

Find more questions by tags JavaScriptHTMLCSSjQuery