Open div by clicking on a date

Asked

Viewed 197 times

0

How do I open one div click on one of the dates? When click on another div 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>
<!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>

jquery html div

  • Can you comment on what does not work? -> http://jsfiddle.net/1r0uo70b/

2 answers

0

For use of date components, as you are using jQuery, I recommend using this following component jQuery Datepicker.

He has the behavior you expect

0


Follow the Fiddle link commented

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

  • was exactly that, thank you very much!

Browser other questions tagged jquery html div

You are not signed in. Login or sign up in order to post.