Skip to main content
adicionou 147 caracteres ao conteúdo; título editado
Fonte Link
Math
  • 31,3mil
  • 15
  • 95
  • 132

Gente,como eu faço p abrir uma Abrir div ao clicar numa das datas,quando clicar em outra,a div aberta feche e abra a clicada com um conteúdo diferente?uma data

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?

Gente,como eu faço p 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?

Abrir div ao clicar em uma data

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?

Fonte Link

Gente,como eu faço p 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>