0

Como eu faço para abrir uma div ao clicar numa das datas? Quando clicar em outra a div aberta feche e abra a clicada com um conteúdo diferente?

#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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" />
		
		<title>Document</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<link href="css/estilo.css" rel="stylesheet" type="text/css" media="all" />
			<script>
					$(document).ready(function(){
				        $("#1").click(function(){
					      $("#2").fadeToggle();
				      });
	
			</script>
	</head>

	<body>
		<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>
	</body>
</html>

1

2 Respostas 2

0

Segue o link do Fiddle comentado

http://jsfiddle.net/gildonei/z0w8mpkq/

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"
    });
});
1
  • era exatamente isso, muito obrigado! Commented 6/07/2015 às 19:51
0

Para utilização de componentes datas, como você está utilizando jQuery, recomendo que utilize esse seguinte componente jQuery DatePicker.

Ele tem o comportamento que você espera

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .