Open div when you click on a date

Question

Open div when you click on a date

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

How do I open a div when clicking on one of the dates? When you click on the other% open% close and open the clicked with a different content?

#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><!DOCTYPEhtml><html><head><metacharset="utf-8" />
		
		<title>Document</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><linkhref="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>

html jquery div

asked by anonymous 24.06.2015 / 22:23

2 answers

0

For using dates components, as you are using jQuery, I recommend that you use this following jQuery DatePicker component.

He has the behavior you expect

24.06.2015 / 22:26

Stream the computer screen with C # Load DataTime field

score 0 · Accepted Answer

Follow the commented Fiddle link

link

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"
    });
});