Jump to content
Gabrielvt14

Como iniciar Accordion fechado

Recommended Posts

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!

Share this post


Link to post
Share on other sites

remova a class in

<div id="collapseOne" class="panel-collapse collapse in">

 

  • +1 1

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 barrigademel
      <head> <!-- Favicon --> <link href='http://www.iconj.com/ico/e/9/e993nwoswx.ico' rel='shortcut icon' type='image/x-icon'/> Não importa como eu adicione ou mude o campo favicon, ele simplesmente não sobe. já tentei re-fazer umas 15x, e mandar as 15 pro head todas sobem sem erro, mas não muda o favicon
    • By bleszerd
      Estou migrando para o frontend recentemente e tenho tido dificuldades para lidar com a formatação de estilos com o CSS, alguém poderia me ajudar? Minha intenção é que o conteúdo destacado em vermelho ocupe o local da marcação verde e o resto fique centralizado na tela. Estou usando o ReactJS para a composição, porém o CSS segue as mesmas regras do tradicional com HTML puro.
       
      Como podem ver até pela imagem, design não é meu ponto forte.
       
      Código do JSX (Componente do React):
      <div className="login-container"> <section className="form"> <form> <h1>Bem vindo!</h1> <input type="text" placeholder="Login" /> <input type="password" placeholder="Senha" /> <p>Possuo um Token</p> <input type="text" placeholder="Token" className="token-input" /> </form> </section> </div>  
      Código do CSS:
      .login-container{ display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1120px; height: 100vh; margin: 0 auto; } .login-container section.form{ width: 100%; max-width: 350px; } .login-container section.form form{ display: flex; justify-content: center; width: 100%; max-width: 1250px; height: 100%; max-height: 700px; } .login-container section.form form h1{ color: #fff; font-weight: bolder; text-shadow: #1B182E 2px 2px 8px; font-size: 42px; margin-bottom: 32px; position: absolute; margin-top: -65px; background: transparent; } .login-container section.form form input{ display: flex; justify-content: space-between; margin: 5px; width: 180px; height: 40px; max-width: 100%; font-weight: bold; padding: 8px; border-radius: 5px; color: white; background: #0A0816; border: solid #0D0929 2px; } .login-container section.form form p{ } .login-container section.form form input + p + input{ background: black; border: solid yellow 2px; }  
      Pra quem não estiver afim de interpretar todo o código para tentar ajudar apenas diga o que você imagina que resolverá o problema. Obrigado desde já :)

    • By sander147
      Boa Tarde, estou com um problema ao por o menu ao lado direito, ele não fica alinhado com o campo de notícias, eu não faço ideia de como fazer eles ficarem lado a lado, alguém poderia me dar uma luz? eu estou seguindo um livro da casa do código mas os resultados não saíram iguais depois que eu fui além do livro. :/
      Deveria ficar assim:
       https://uploaddeimagens.com.br/images/002/561/267/original/menu.png?1585683825
       
      Ficou assim:

    • By binds
      Olá Caríssimos,
       
      Não tenho muito conhecimento de javascript, desde já agradeço se alguém puder me ajudar.
      Preciso criar uma página simples de validação por idade para acessar uma página, a ideia é simples:
      se a pessoa nasceu antes de 2002 redireciona a página meusite_com_br/maior 
      mas se ela nasceu depois de 2002 redireciona a página meusite_com_br/menor
      Garimpando achei o código abaixo que fiz alguns ajustes, porém não sei como abrir as respectivas paginas meusite_com_br/menor ou meusite_com_br/maior como resultado, o resultado nesse caso são textos:  "MENOR 18" : "MAIOR DE 18"
       
      <!DOCTYPE html> <html> <body> <CENTER> <h2>Validador de Idade</h2> <p>Digite o ano que você nasceu para acessar o site:</p> <input id="age" value="Ex: 1990" /> <br> <button onclick="myFunction()">ACESSAR SITE</button> <p id="demo"></p> <script> function myFunction() {   var age, voteable;   age = Number(document.getElementById("age").value);   if (isNaN(age)) {     voteable = "Você não inseriu um ano válido. <BR> Exemplo: 2020";   } else {     voteable = (age > 2002) ? "MENOR 18" : "MAIOR DE 18";   }   document.getElementById("demo").innerHTML = voteable; } </script> </CENTER> </body> </html>  
      Novamente agradeço a ajuda!
      Luis
       
×

Important Information

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