JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<a class="fancybox" id="button2" href="#parceiros"><div id="botao2" class="preto">PARCEIROS</div></a>

<div style="display:none">
    <div id="parceiros"> <a class="fancybox" id="fancybox-button3" href="#parcas">Teste</a>

    </div>
</div>
<div style="display:none">
    <div id="parcas" class="parcas666">Teste2</div>
</div>

JavaScript

$(".fancybox").fancybox({
    closeBtn: false,
    // hideOnContentClick: true, // this one is for v1.3.x
    closeClick: true,
    padding: 0,
    fitToView: false,
    helpers: {
        overlay: {
            css: {
                background: "rgba(0, 0, 0, 0.55)"
            }
        },
        buttons: {}
    },
    afterClose: function () {
        if (this.element.attr("id") == "fancybox-button3") {
            setTimeout(function () {
                $("#button2").click();
            }, 200);
        }
    }
});
/*
$("a#fancybox-button3").fancybox({
    closeBtn: false,
    //hideOnContentClick : true,
    padding  0,
    fitToView : false,
    wrapCSS : "fancybox-wrap22",
    autoCenter: true,
    helpers : {
        overlay: {
            css: {
    background : "rgba(0, 0, 0, 0.55)"
            }
        },
        buttons: {}
    }
});
*/