Jump to content
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

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 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!
    • By 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>
    • By 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(); } }  
×

Important Information

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