JSFiddle - React, Tailwind, and code Playground

by Gildonei Mendes Anacleto Junior

HTML

<div id="agenda">
    <div>
        <a class="link" id="1">1</a>
		<div style="display: none;" class="estilo" id="2"><p>Rua tanakomoto - 85, fgffgjgyjf - São Paulo, SP</p><a href="#">Veja no Maps</a></div>
        <a class="link" id="1">2</a>
		<div style="display: none;" class="estilo" id="2"><p>Rua tanakomoto - 45, kjhdsxrjnf - São Paulo, SP</p><a href="#">Veja no Maps</a></div>
        <a class="link" id="1">3</a>
        <div style="display: none;" class="estilo" id="2"><p>Rua tanakomoto - 90, dffsdrgfgs - São Paulo, SP</p><a href="#">Veja no Maps</a></div>
    </div>
</div>

CSS

#agenda {
	width: 1000px;
	height: 500px;
	background-color: white;
	position: relative;
}

.link {
	color: orange;
	text-decoration: none;
	font-family: segoe ui;
	font-size: 70px;
	cursor: pointer;
}

.estilo {
	width:300px; 
	height:200px; 
	margin:auto;
	position: absolute;
	top: 150px; 
	z-index:200; 
	border-radius: 1px; 
	background-color: rgba(21, 21, 21, 0.9);
	text-align: center; 
	padding:30px;
	color: white;
	font-family: segoe ui;
	font-size: 20px;
	cursor: crosshair;
}

.estilo a {
	text-decoration: none;
	position: absolute;
	bottom: 80px;
	right: 125px;
	color: orange;
}

JavaScript

$(document).ready(function(){
    $("#1,#2,#3").click(function(){
        $('.estilo').fadeOut(); // Oculta Todos os Divs
        $(this).next().fadeIn();// Mostra somente o div que está "junto ao link"
    });
});