Ir para conteúdo
Jefferson andre

Problemas com style accordion

Recommended Posts

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?

 

 

plataforma_accordion.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Gabrielvt14
      Olá,
       
      Tenho na minha página um accordion, está funcionando perfeitamente, porém, quando inicia a página ele ja vem aberto.
      O que quero é que ele venha fechado, tem como?
       
      HTML:
      <div class="bs-example"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">TITULO 1</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <ul type="disc"> <li>TEXTO 1</li> <li>Texto 2</li> </ul> <i><a href="#"><p>Leia mais</p></a></i> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Titulo 2</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <ul type="disc"> <li>Texto 1</li> <li>Texto 2</li> </ul> <i><a href="h#"><p>Leia mais</p></a></i> </div> </div> </div> </div> </div>  
      CSS:
      /* ACCORDION */ .panel-group .panel { border-radius: 0; box-shadow: none; border-color: #EEEEEE; } .panel-default > .panel-heading { padding: 0; border-radius: 0; color: #212121; background-color: #FAFAFA; border-color: #EEEEEE; } .panel-title { font-size: 14px; } .panel-title > a { display: block; padding: 15px; text-decoration: none; } .more-less { float: right; color: #212121; } .panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: #EEEEEE; }  
      JS:
      function toggleIcon(e) { $(e.target) .prev('.panel-heading') .find(".more-less") .toggleClass('glyphicon-plus glyphicon-minus'); } $('.panel-group').on('hidden.bs.collapse', toggleIcon); $('.panel-group').on('shown.bs.collapse', toggleIcon);  
      Desde ja agradeço!
    • Por Guilherme Coveseviski
      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>
    • Por Rodrigo Vieira E da Silva
      Bom dia a toda galera ninja em JS, tudo bem com vocês?
       
      Estou com um problema que está me deixando de cabelo em pé, eu inserir o código abaixo em meu projeto mas ao executar o mesmo meu elemento accordion e 02 modais parou de funcionar, será que alguém pode me ajudar ou me dar a direção do caminho correto para que o mesmo volte a funcionar.
       
      Segue código abaixo,.
      function showUser(str) { if (str == "") { document.getElementById("txtHint").innerHTML = ""; return; } else { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("txtHint").innerHTML = this.responseText; } }; xmlhttp.open("GET","filtro.php?filtro="+str,true); xmlhttp.send(); } }  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.