Jump to content
Biel.

accordion

Recommended Posts

Olá pessoal. Direto ao ponto. Abaixo temos um accordion com três paginas. pg_inicial.php  -  pg_1.php  -  pg_2.php . De inicio accordion 1 e accordion 2 está com seu conteúdo oculto.
  
Suponha que cliquei no accordion 1. Vai exibe normalmente  a divConteudo com seu link pg_1.php ; até aqui tudo ok . O problema é que após o clique no link pg_1 a divConteudo volta a ficar oculta . Gostaria que a divConteudo  não ficasse oculta quando o link pg_1.php for clicado

esta é a pg_inicial.php
<style>
.accordion {
  background-color: #ccc;
  color: #000;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size:17px;
  margin-bottom:1px;
}

.divConteudo  {
  display:none;
  padding: 0 18px;
  background-color: white;
}

</style>


<h2>Accordion</h2>

<button class="accordion">accordion 1</button>
<div class="divConteudo">
 <a href="pg_1.php">pg_1</a>
</div>

<button class="accordion">accordion 2</button>
<div class="divConteudo">
 <a href="pg_2.php">pg_2</a>
</div>


<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {

  acc[i].addEventListener("click", function() {
  
    var panel = this.nextElementSibling;
   
   if (panel.style.display === "block") {
      panel.style.display = "none";
    } 
    else {
      panel.style.display = "block";
    }
    
  });
}
</script>

...

esta é a pg_1.php
<?php include "pagina_inicial.php"; ?>
este é o conteudo da pg_1.php

...

esta é a pg_2.php
<?php include "pagina_inicial.php"; ?>
este é o conteudo da pg_2.php

 

Share this post


Link to post
Share on other sites

Vamos lá...

Não deu para entender quem é a página inicial.

Quando você redireciona, todo html é redefinido incluindo scripts. (Por isso não entendi também a lógica de redirecionar e manter, pois não se dar para saber quem de fato está executando o script).

 

Der uma olhada nesse meu script accordion:

https://github.com/Spell-Master/sm-web/blob/master/javascript/Accordion/

 

Nesse meu script você pode expandir um elemento através do método forceOpen

Spoiler

<!DOCTYPE html>
<html>
    <head>
        <link href="Accordion.css" rel="stylesheet" type="text/css"/>
        <script src="Accordion.js" type="text/javascript"></script>
    </head>
    <body>
        <button class="acc-button">Primeiro</button>
        <div class="acc-container">
            Primeiro
        </div>

        <button class="acc-button">Segundo</button>
        <div class="acc-container">
            Segundo
        </div>

        <button class="acc-button">Terceiro</button>
        <div class="acc-container">
            Terceiro
        </div>
      
        <script>
            var acc = new Accordion();
            acc.forceOpen(2); // A segunda sanfona é expandida
        </script>
    </body>
</html>

 

 

Explique melhor sua situação porque podemos levar informações de página para outra através de protocolos GET.

Share this post


Link to post
Share on other sites
5 horas atrás, Omar~ disse:

Vamos lá...

Não deu para entender quem é a página inicial.

Quando você redireciona, todo html é redefinido incluindo scripts. (Por isso não entendi também a lógica de redirecionar e manter, pois não se dar para saber quem de fato está executando o script).

 

Der uma olhada nesse meu script accordion:

https://github.com/Spell-Master/sm-web/blob/master/javascript/Accordion/

 

Nesse meu script você pode expandir um elemento através do método forceOpen

  Mostrar conteúdo oculto


<!DOCTYPE html>
<html>
    <head>
        <link href="Accordion.css" rel="stylesheet" type="text/css"/>
        <script src="Accordion.js" type="text/javascript"></script>
    </head>
    <body>
        <button class="acc-button">Primeiro</button>
        <div class="acc-container">
            Primeiro
        </div>

        <button class="acc-button">Segundo</button>
        <div class="acc-container">
            Segundo
        </div>

        <button class="acc-button">Terceiro</button>
        <div class="acc-container">
            Terceiro
        </div>
      
        <script>
            var acc = new Accordion();
            acc.forceOpen(2); // A segunda sanfona é expandida
        </script>
    </body>
</html>

 

 

Explique melhor sua situação porque podemos levar informações de página para outra através de protocolos GET.

Olá Omar. A pg_inicial.php começa com <style> CSS e vai até o fechamento </script> JAVASCRIPT . 

Share this post


Link to post
Share on other sites

 

Independente como é o esquema HTML aí uma coisa sempre será exata, os elementos existem mesmo em redundância.

 

Isso lhe tras um ARRAY NOD-LIST de todos elementos class accordion.

16 horas atrás, Biel. disse:

var acc = document.getElementsByClassName("accordion");

 

Pois bem lhe darei uma dica útil para quem quer manipular HTML use o comando: console.log(); no caso obtendo o log da variável acc que armazena o array.

console.log(acc);

Se olhar o console do browser verá que o índice [0] é o primeiro elemento o índice [1] o segundo e por aí vai....

Aquele que você quer "mostrar" basta apenas alterar sua propriedade style

acc[0].style.display = 'none';

Ou seja na página que você redirecionou, quer manipular um elemento é só buscar por ele e fazer o que bem entender.

Share this post


Link to post
Share on other sites

Ola boa tarde

 

Tu quer ocultar um quando outro for clicado seria isso?

 

Perdoa se o meu post não for o que queres mais foi o que pude entender

 

Fiz da seguinte forma 

 

<style>
body {
	font-family:Arial, Helvetica, sans-serif;
}
p {
	font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.5px;
    color: #484848;
}
a {
	text-decoration:none;
}
/* Accordion */
.accordion, .accordion * {
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}

.accordion {
	overflow:hidden;
	box-shadow:0px 1px 3px rgba(0,0,0,0.25);
	border-radius:3px;
	background:#f6f6f6;
}

/* Título da seção */
.section-title {
	background:#2f2f2f;
	display:inline-block;
	border-bottom:1px solid #1a1a1a;
	width:100%;
	padding:15px;
	transition:all linear 0.15s;
	color:#fff;
	font-size:18px;
	text-shadow:0px 1px 0px #1b1b1b;
}

.section-title.active,
.section-title:hover {
	background:#505050;
}

.section:last-child .section-title {
	border-bottom:none;
}

.section-title:after {
/* Caractere Unicode para sinal de "mais" (+) */	
    content: '\02795';
    font-size: 13px;
    color: #FFF;
    float: right;
    margin-left: 5px;
}

.section-title.active:after {
/* Caractere Unicode para o sinal "menos" (-) */
    content: "\2796";
}

/* Conteúdo da seção */
.section-content {
	display:none;
	padding:20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<div class="accordion">
    
<div class="section">
<a class="section-title" href="#accordion-1">Accordion 1</a>
<div id="accordion-1" class="section-content">
<a href="pg_1.php">pg_1</a>
</div><!-- seção-conteúdo final -->
</div><!-- final da seção -->
    
<div class="section">
<a class="section-title" href="#accordion-2">Accordion 2</a>
<div id="accordion-2" class="section-content">
 <a href="pg_2.php">pg_2</a>
</div><!-- seção-conteúdo final -->
</div><!-- final da seção -->
    
	
	
</div><!-- extremidade de accordion -->

<script>
$(document).ready(function() {
$('.section-title').click(function(e) {
	
// Obtenha o valor do link atual
	var currentLink = $(this).attr('href');
	if($(e.target).is('.active')) {
		close_section();
	}else {
		close_section();
	// Adicionar classe ativa ao título da seção
	$(this).addClass('active');
	// Exibir o conteúdo oculto
	$('.accordion ' + currentLink).slideDown(350).addClass('open');
	}
e.preventDefault();
});
	
function close_section() {
	$('.accordion .section-title').removeClass('active');
	$('.accordion .section-content').removeClass('open').slideUp(350);
}
	
});
</script>

 

Veja aqui...

 

Espero ter ajudo

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 Biel.
      Olá pessoal. Direto ao ponto 
      A primeira instrução [a-z]{1,3} especifiquei min 1 e max 3 letras para validar 
      A segunda instrução (.[a-z]{1,3})? coloquei na mesma $regex porque pode ou não existir na $campoDeTexto
      Como fazer a primeira instrução não enxergar a segunda instrução ou seja entender que seu máximo é até 3 letras e não até 8 letras  Obrigado 
      <?php //$campoDeTexto = "aaa.z"; // pode ou não existir a 2º instrução no campoDeTExto ou seja .z ou .zz ou .zzz $campoDeTexto = "aaaaaaaa"; $regex = '/^[a-z]{1,3}(.[a-z]{1,3})?$/i'; if (preg_match($regex, $campoDeTexto)){ echo "valida "; } else{ echo "nao valida"; } ?>  
    • By Biel.
      Olá pessoal. Direto ao ponto.  Estou tentando replicar $cores para dentro do while e quando der um print $cores os dados exibir normalmente na tela.. A ideia é replicar $cores para dentro do while e não deixar $cores  dentro do while.  Muitos já falaram que isso é impossível. alguém discorda? Como resolver o problema ? Obriigado !
      tabela1 cores green blue red <?php $cores = $linha['cores']; ?> <?php $sql = mysqli_query($con, "SELECT * FROM tabela1 "); while($linha = mysqli_fetch_array($sql)){ ?> <?php } ?>  
    • By Biel.
      Olá pessoal. Direto ao ponto. O código php abaixo retorna este resultado:
      1-blue 2-blue 3-blue 4-blue 5-blue 6-green 7-green 8-green 9-green 10-green 11-green 12-green 13-green 14-red 15-red 16-red 17-orange 18-orange 19-orange 20-orange Como faço para retornar este resultado
      1-blue-1 2-blue-2 3-blue-3 4-blue-4 5-blue-5 6-green-1 7-green-2 8-green-3 9-green-4 10-green-5 11-green-6 12-green-7 13-green-8 14-red-1 15-red-2 16-red-3 17-orange-1 18-orange-2 19-orange-3 20-orange-4 <?php for($i=1; $i<=20; $i++){ if($i<=5){ $a=$i.'-blue'; } if($i>5 && $i <=13){ $a=$i.'-green'; } if($i>13 & $i <=16){ $a=$i.'-red'; } if($i>16 && $i<=20){ $a=$i.'-orange'; } print $a.'<br>'; } ?>  
    • By Biel.
      Olá pessoal. Direto ao ponto. O código abaixo imprime todos os dados dentro do while . Existe alguma forma de imprimir todos os dados fora do while ?
      tab_aprendiz cores green yellow blue brown orange <?php $sql = mysqli_query($con, "SELECT * FROM tab_aprendiz"); while($linha=mysqli_fetch_array($sql)){ $cores = $linha['cores']; echo $cores.'<br>'; } ?>  
    • By Biel.
      Olá pessoal . Direto ao ponto. Abaixo tem duas tabelas unidas. Como fazer retornar a quantidade correta de registros  na linha indice 1 
      Gostaria de imprimir na tela este resultado 
      tab_aprendiz tem 2 registros
      tab_aluno tem 3 registros
       
      tab_aprendiz id indice nome 93 1 joao 94 1 lucas 95 2 mateus 96 2 silva tab_aluno id indice carro 67 1 gol 68 1 corsa 69 1 palio 70 2 monza 71 2 vectra 72 2 uno ...
      <?php $sql = mysqli_query($con, "SELECT * FROM tab_aprendiz INNER JOIN tab_aluno ON tab_aprendiz.indice = tab_aluno.indice WHERE indice = '1' "); $quantidade_de_dados1 = mysqli_num_rows($sql); $quantidade_de_dados2 = mysqli_num_rows($sql); echo 'tab_aprendiz tem' .$quantidade_de_dados1. 'registros'; echo 'tab_aluno tem' .$quantidade_de_dados2. 'registros'; ?>  
×

Important Information

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