Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Biel.

accordion

Por , em Javascript

Recommended Posts

Biel.    9

Biel.
Postado

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

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Omar~    87

Omar~
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Biel.    9

Biel.
Postado
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 . 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Omar~    87

Omar~
Postado

 

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jack Oliveira    1

Jack Oliveira
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • Biel.
      alterar permanentemente valor do atributo href
      Por Biel.
      Olá pessoal. Ao digitar um texto qualquer no input e pressionar submit o valor do atributo href é alterado temporariamente. Como alterar permanentemente no corpo do documento  o valor do atributo href, digitando um nome de link qualquer no campo input e em seguida submit ?
      <!DOCTYPE html> <html> <head> <style> input { width: 100%; font-size: 20px; } textarea { width: 100%; font-size: 16px; height: 200px; } .class88 { margin-top: 50px; padding: 10px; max-width: 100px; } </style> </head> <body> <h2> alterar valor do atributo href</h2> digite um texto qualquer <input type="text" class="class42" value=""> <a id="linkToChange" href="teste5.php" class="class43"></a> <input type="submit" class="class88" value="enviar" onclick="alterarHref()"> <script> function alterarHref() { // pega o valor da class42 var valorDaclass42 = document.querySelector('.class42').value.trim(); // altera o valor do atributo href para o valorDaclass42 sugerido document.querySelector('.class43').setAttribute('href', valorDaclass42); console.log("Href alterado:", valorDaclass42); } </script> </body> </html>  
    • Biel.
      servir vários banners com um script
      Por Biel.
      Olá pessoal. BannerA está funcionando normalmente. Como usar mesmo script para bannerB e bannerC.
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Banner Aleatório</title> <style> /* Estilos opcionais para o banner */ #divPai { margin: auto; border: 2px solid red; } #bannerA { width: 240px; height: 480px; overflow: hidden; position: relative; } #bannerA img { width: 100%; height: auto; position: absolute; top: 0; left: 0; transition: 1.5s ease-in; } #bannerA img.active { opacity: 1; } </style> </head> <body> <div id="divPai"> <div id="bannerA" class="bannerA"> <a href="link1"><img src="image1.jpg" alt="Imagem 1"></a> <a href="link2"><img src="image2.jpg" alt="Imagem 2"></a> <a href="link3"><img src="image3.jpg" alt="Imagem 3"></a> </div> <!-- <hr> <div id="bannerB" class="bannerB"> <a href="link4"><img src="image4.jpg" alt="Imagem 4"></a> <a href="link5"><img src="image5.jpg" alt="Imagem 5"></a> <a href="link6"><img src="image6.jpg" alt="Imagem 6"></a> </div> <hr> <div id="bannerC" class="bannerC"> <a href="link7"><img src="image7.jpg" alt="Imagem 7"></a> <a href="link8"><img src="image8.jpg" alt="Imagem 8"></a> <a href="link9"><img src="image9.jpg" alt="Imagem 9"></a> </div> --> </div> <hr> <script> document.addEventListener("DOMContentLoaded", function() { // var banner = document.getElementById("divPai"); // var images = banner.querySelectorAll("img"); var images = document.querySelectorAll("#bannerA img"); // Função para exibir uma imagem aleatória function showRandomImage() { // Escolhe aleatoriamente um índice de imagem var randomIndex = Math.floor(Math.random() * images.length); // Define todas as imagens como ocultas images.forEach(function(img) { img.style.display = "none"; }); // Exibe a imagem aleatória images[randomIndex].style.display = "block"; } // Chama a função inicialmente e define um intervalo para exibir novas imagens a cada 3 segundos showRandomImage(); setInterval(showRandomImage, 1000); // makeSliderKind('.bannerA', 1000); // makeSliderKind('.bannerB', 2000); // makeSliderKind('.bannerC', 3000); }); </script> </body> </html>  
    • Biel.
      banner
      Por Biel.
      Olá pessoal. O banner abaixo está funcionando e o link acompanha o banner, até aqui tudo ok ! Quero muito fazer uma transição suave entre uma image e outra, colocando as propiedades e valores no css ou diretamente no javascript e nada de propiedades e valores no html através do style . Se possível coloque no código somente o que precisa . Obrigado!
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Banner</title> <style> /* Estilos opcionais para o banner */ .banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner img { width: 100%; height: auto; position: absolute; top: 0; left: 0; transition: 1.5s ease-in; } .banner img.active { opacity: 1; } </style> </head> <body> <div class="banner" id="banner"> <a href="link1" class="ggg"><img src="image1.jpg" alt="Imagem 1"></a> <a href="link2" class="ggg"><img src="image2.jpg" alt="Imagem 2"></a> <a href="link3" class="ggg"><img src="image3.jpg" alt="Imagem 3"></a> <a href="link4" class="ggg"><img src="image4.jpg" alt="Imagem 4"></a> <a href="link5" class="ggg"><img src="image5.jpg" alt="Imagem 5"></a> </div> <script> document.addEventListener("DOMContentLoaded", function() { var banner = document.getElementById("banner"); var images = banner.querySelectorAll("img"); // Função para exibir uma imagem aleatória function showRandomImage() { // Escolhe aleatoriamente um índice de imagem var randomIndex = Math.floor(Math.random() * images.length); // Define todas as imagens como ocultas images.forEach(function(img) { img.style.display = "none"; }); // Exibe a imagem aleatória images[randomIndex].style.display = "block"; } // Chama a função inicialmente e define um intervalo para exibir novas imagens a cada 3 segundos showRandomImage(); setInterval(showRandomImage, 3000); }); </script> </body> </html>  
       
    • Biel.
      transição suave
      Por Biel.
      Olá pessoal. O banner abaixo está funcionando normalmente, mas a transição entre uma imagem e outra está um tanto truculenta. Quero deixar suave. Como resolver isso? Obrigado !
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>transition suave entre uma image e outra</title> <style> #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } #bannerGG { width: 100%; height: auto; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } /* #tete:active { opacity: 1; } */ </style> </head> <body> <div id="banner"> <img class="bannerGG" src="imagem1.png" alt="Image 1"> <img class="bannerGG" src="imagem2.png" alt="Image 2"> <img class="bannerGG" src="imagem3.png" alt="Image 3"> <img class="bannerGG" src="imagem4.png" alt="Image 4"> <img class="bannerGG" src="imagem5.png" alt="Image 5"> </div> <script> const image = document.querySelectorAll('.bannerGG'); const banner = document.getElementById('banner'); function showRandomImage() { const randomIndex = Math.floor(Math.random() * image.length); const randomImage = image[randomIndex]; const imgElement = document.createElement('img'); imgElement.src = randomImage.src; const linkElement = document.createElement('a'); linkElement.appendChild(imgElement); banner.innerHTML = ''; banner.appendChild(linkElement); } showRandomImage(); setInterval(showRandomImage, 3000); </script> </body> </html>  
    • Biel.
      mostrar link do banner que vem da tag a
      Por Biel.
      Olá pessoal. O banner abaixo está funcionando, mas quero que o link do banner venha da tag a  e não do javascript . Como resolver? 
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mostrar link do banner que está na tag a</title> <style> #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner-img { width: 100%; height: 100%; object-fit: cover; position: absolute; /* opacity: 0; */ transition: opacity 0.5s ease-in-out; } .banner-link { display: block; width: 100%; height: 100%; } </style> </head> <body> <div id="banner"> <a href="link147"><img class="banner-img" src="imagem1.png" alt="Image 1"></a> <a href="link254"><img class="banner-img" src="imagem2.png" alt="Image 2"></a> <a href="link350"><img class="banner-img" src="imagem3.png" alt="Image 3"></a> <a href="link462"><img class="banner-img" src="imagem4.png" alt="Image 4"></a> <a href="link538"><img class="banner-img" src="imagem5.png" alt="Image 5"></a> </div> <script> const images = document.querySelectorAll('.banner-img'); const banner = document.getElementById('banner'); function showRandomImage() { const randomIndex = Math.floor(Math.random() * images.length); const randomImage = images[randomIndex]; const imgElement = document.createElement('img'); imgElement.src = randomImage.src; imgElement.alt = randomImage.alt; imgElement.classList.add('banner-img'); const linkElement = document.createElement('a'); // linkElement.appendChild(imgElement); linkElement.href = randomImage.href; linkElement.classList.add('banner-link'); linkElement.href = "page" + (randomIndex + 1) + ".html"; // Link para cada imagem linkElement.appendChild(imgElement); banner.innerHTML = ''; banner.appendChild(linkElement); } showRandomImage(); setInterval(showRandomImage, 1000); </script> </body> </html> Resolvido,  Obrigado a todos !
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito