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. O código abaixo está ok, clico no botão e o javascript  mostra o conteúdo da div. Gostaria que mesmo atualizando a página/f5 o conteúdo da div continuasse visível. Como resolver este problema? Obrigado !
      <div id="id_tete" style="background:#EBEBEB; font-size:30px; display:none; "> manter conteudo da div visivel mesmo atualizando a página/f5 </div> <button name="ffsd" onClick="func_mostrar()">click</button> <script> function func_mostrar(){ var x = document.getElementById("id_tete"); x.style.display = "block"; } </script>  
    • By Biel.
      Olá pessoal Direto ao ponto. A imagem abaixo tem EX1 e EX2 . Como fazer o código imprimir o mesmo resultado que o EX2 ?  Obrigado !
      <style> *{ margin:0; padding:0;} .divprincipal{ display: flex; flex-wrap:wrap; align-items: center; padding:10px; border:1px solid black; } .aprendiz{ width:300px; margin-left:20px; border:1px solid black; } h1{ width:100%; display:block; } b{ font-weight:normal; margin-bottom:8px; line-height:24px; display:block; border:1px solid black; } </style> <div class="divprincipal"> <div class="aprendiz"> <h1>cabeçalho A</h1> <b> s simply dummy text of the printing and typesetting industry. Lorem has been the industry’s standard text ever sinn printer took a galley of type and scrambled it to make a </b> </div> <div class="aprendiz"> <h1 >cabeçalho B</h1> <b>s simply dummy text of the printing </b> </div> </div>  

    • By Biel.
      Problema resolvido.
       
      <select name="cores"  size="3" >
          <option value="red" selected>red</option>
          <option value="blue" selected>blue</option>
           <option value="green" selected>green</option>
      </select>
    • By Biel.
      Olá pessoal. Direto ao ponto. Como forçar seleção de todos itens do select ? Obrigado !
      <form action="pagina1.php"> <select name="aprendiz" multiple="multiple" size="3" > <option>item1</option> <option>item2</option> <option>item3</option> </select>  
    • 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"; } ?>  
×

Important Information

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