Jump to content
  • 0
Guilherme Coveseviski

Alguém sabe abrir um Accordion com link externo?

Question

Alguém sabe abrir um Accordion com link externo? 

 

segue o código

 

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">

<a  href="#link" ><div  class="w3-light-grey w3-section">
  <button onclick="myFunction('Demo1')" class="w3-button w3-block">
  Default (100%)</button>
  <div id="Demo1" class="w3-hide w3-container">
    <p>Lorem ipsum 100% width</p>
  </div>
</div></a>


</div>
<script>
function myFunction(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>

</body>
</html>

Share this post


Link to post
Share on other sites

3 answers to this question

Recommended Posts

  • 0

tenho um link em uma página. Ex.: RECEITA DE TOMATE. 

QUANDO CLICO EM RECEITA DE TOMATE. VAI abrir o código acima em outra pagina com o Accordion aberto. Neste explo voce tem que clicar no titulo para abrir a função. eu não quero isso. 

Digamos que iria aparacer a ceira de tomate inteira na outra pagina.. eu gostaria de colocar as receitas em uma pagina só. com os Accordion fechados.. e com a possibilidade de clicar nos links de acesso para abri-los. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Jefferson andre
      Ola pessoal,
      estou fazendo alguns testes com o accordion e nao sei como ajustar a sua posicao absoluta na pagina ou seja o menu accordion fica por baixa do topo. Segue imagem da tela abaixo do topo principal
       
      Como resolver isso?
       
       

    • By Matt_Engler
      Por favor, preciso de ajuda para meu TCC onde terei que criar um site. Eis o problema, utilizei o CSS para estilizar os links do site, dessa maneira:
       
      a{
          color: white;
          text-decoration: none;
          padding: 5px 10px;
      }
      a:link{
          color: white;
      }
      a:visited{
          color: white;
      }
      a:hover{
          color: black;
          background-color: white;
      }
       
      Essa estilização foi aplicada a todos os links do site, porém, quero aplicá-la a apenas alguns links específicos (no caso, os links do top). Como faço para "isolar" a estilização de cada link?!
       
      Abaixo disponibilizo o HTML e o CSS do site, desde já agradeço!
       
       
      <!DOCTYPE html>
      <html>
      <head>
          <title>Anything</title>
          <link rel="stylesheet" type="text/css" href="css/Stil.css">
      </head>
      <body>
      <!-- Inicio do Menu -->
      <div class="haus">
          <div class="area">
              <h1 class="logo"> <span class="yellow">&emsp;<img src="Logo.png" width="325" height="50"></span> </h1>
              <div class="menu">
                  <a href="Haus.html">Haus</a>
                  <a href="#">Nachrichten</a>
                  <a href="#">Kino</a>
              </div>
          </div>n
      </div>
      <!-- Fim do menu -->
      <!-- Inicio do Conteúdo -->
      <br>
      <div class="area-principal">
          
          <div class="postagem">
              <h2><a href="#"> Título da Notícia:</a></h2>
              <span class="data-postagem">Data da postagem:</span>
              <img src="img/imagem1.png" class="img-postagem">
              <p>
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
              </p>
              <span>Postado por: Fulano</span>
                  </div>
      </div>
      </body>
      </html>
       
      ================================================================================================================================================================
       
      *{
          margin: 0px;
          padding: 0px;
      }
      body{
          background-color: lightgray;
          font-size: 16px;
          font-family: "Trebuchet MS", Helvetica, sans-serif;
          color: black;
      }
      .haus{
          font-size: 25px;
          color: yellow;
          background-color: black;
          border-bottom: 7px solid gold;
          height: 50px;
          position: fixed;
          width: 100%;
          top: 0px;
      }
      .area{
          width: 720px
          margin: 0 auto;
      }
      .menu{
          float: right;
          padding: 10px 100px;
      }
      .logo{
          float: left;
      }
      .yellow{
          color: gold;
      }
      a{
          color: white;
          text-decoration: none;
          padding: 5px 10px;
      }
      a:link{
          color: white;
      }
      a:visited{
          color: white;
      }
      a:hover{
          color: black;
          background-color: white;
      }

      .area-principal{
          width: 720px;
          margin: 55px auto 10px auto;
      }
      .postagem{
          margin: 10px;
          background-color: darkgray;
          margin-bottom: 10px;
      }
      h2{
          color: gold;
          text-decoration: none;
      }
      .data-postagem{
          display: block;
          font-size: 14px;
          border-bottom: 1px solid #f4f4f4;
          padding-bottom: 10px;
          margin-bottom: 10px;
      }
      .img-postagem{
          float: left;
          margin: 0px 10px 10px 0px;
      }
      p{
          text-align: justify;
          padding: 10px;
      }
       
    • By Pablo Bernardo
      Gostaria de fazer um botão que levasse o usuário não pra uma página da web, e sim para um aplicativo de seu computador.
      No caso iniciasse o aplicativo do computador ai clicar no botão.
    • By kellanjos
      Olá pessoal. Tem uma coisa que o corel faz e está me irritando. Quando eu linko algumas imagens, como se faz no cartão de visitas interativo e salvo como PDF Web ou PDF distribuição de documentos.. o que era o link do botão de facebook, passa a ser de instagram, o do site passa ser do  whats.. ou repete os hiperlinks.. e gero novo arquivo, refaço tudo, seja através já janela de internet ou a de links e marcadores. pensei que poderia ser pq cada botão tinha camadas e efeitos.. deixei com uma camada e nada, bloquei o objeto e nada.. estou tipo faço já tentativas tolas e não consigo resolver essa questão das trocas ou repetições dos hiperlinks.. e quando eu fecho e abro o arquivo.. muda toda vez.. o trem dos hiperlinks tem vontade e vida própria..como eu faço pra prender essas pestes no lugar que eu quero?.. rs socorro..
    • By Jefferson andre
      Gostaria de fazer o campo email virar um link do tipo mailto mas nao entendi o porque nao esta funcionando, segue o programinha
      <?php // fazendo uma conexão com o banco de dados include("conexao.php"); //pesquisa $resultado_videos = $arquivo->query("SELECT * FROM alunos"); if (false === $resultado_videos) { echo mysqli_error(); } echo"<body> <table class='table-responsive' width='50%' border='1' cellpadding='1' cellspacing='0'> <thead> <tr align='center' bgcolor='999999'> <td>Nome</td> <td>Email</td> <tr> </thead> <body>"; //pecorrendo os registros da consulta. while($aux = mysqli_fetch_assoc($resultado_videos)) { $nome = $aux["Nome"]; $email = $aux["Email"]; echo "<tr> <td>" . $nome . "</td> <td>" . $email . "<a href='mailto:$email'> </td> </tr>"; // echo "Nome:".$aux["Nome"]."<br />"; // echo "<b>"."Email:"."</b>".$email." "."<br />"; } echo"</body> </table>"; mysqli_close($arquivo); ?> Quero aproveitar o aprendizado e usar o mesmo principio onde dentro do banco de dados vai ter um caminho absoluto e ao ser clicado abrira um arquivo pdf por exemplo
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.