JSFiddle - React, Tailwind, and code Playground

by Irvin Dominin

HTML

<div class="soft-titulo-vaga"> <a class="abrir" data-id="1">abrir demo 1</a>
 <a class="fechar" data-id="1">fechar demo 1</a>

    <div class="vaga" data-id="1">vaga demo 1</div>
<a class="abrir" data-id="2">abrir demo 2</a>
 <a class="fechar" data-id="2">fechar demo 2</a>

    <div class="vaga" data-id="2">vaga demo 2</div>
</div>

CSS

.vaga, .fechar {
    display: none
}
.abrir{
    display:block
}

JavaScript

$(document).ready(function () {
    $('.abrir').click(function () {
        $(this).hide();
        $('.fechar[data-id=' + $(this).attr("data-id")+"]").show();
        $('.vaga[data-id=' + $(this).attr("data-id")+"]").slideDown('slow');
    });
    $('.fechar').click(function () {
        $(this).hide();
        $('.abrir[data-id=' + $(this).attr("data-id")+"]").show();
        $('.vaga[data-id=' + $(this).attr("data-id")+"]").slideUp('slow');
    });
});