-
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!
-
.thumb.jpeg.859c7e8168a7fbb251f77973658b8120.jpeg)
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(); } }
-
