JSFiddle - React, Tailwind, and code Playground
HTML
<div class="showable show-youtube">youtube</div>
<div class="showable show-vkontakte">vkontakte</div>
<a class="showlink" data-show="youtube">youtube</a>
<a class="showlink" data-show="vkontakte">vkontakte</a>
CSS
.showable
{
display: none;
border: 1px #f00 dashed;
padding:10px;
}
.showlink
{
cursor: pointer;
}
JavaScript
var links = document.querySelectorAll('.showlink');
links.forEach(function(link) {
link.addEventListener('click', function(){
var divs = document.querySelectorAll('.showable');
divs.forEach(function(div) {
div.style.display = 'none';
});
var aim = document.querySelector('.show-' + this.getAttribute('data-show'));
if(aim) {
aim.style.display = 'block';
}
});
});