Ir para conteúdo

Arquivado

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

Biel.

mostrar e esconder um class="conteudo" por vez

Por , em Javascript

Recommended Posts

Biel.    9

Biel.
Postado

Boa tarde a todos. Direto ao ponto. Pessoal estou tentando fazer o efeito sanfona/accordion com jquery ; exibindo assim  somente o  conteúdo da categoria que receber um click  . Sei que na web muita coisa pronta. Estou postando justamente para que me ajudem a desenvolver de uma forma que eu consiga compreender . Grato! 

  

<!DOCTYPE html PUBLIC >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>...</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>
*{ margin:0; padding:0;}
body{ font-family:Verdana, Tahoma, 'Trebuchet MS' ; }
.caixa{ max-width:500px; margin:0px 0px 20px 0px;  }
.conteudo{  background-color:#FC9;  } 
.hide{display: none;} 
.show{display: block;}

</style>

<script type="text/javascript">

$(document).ready(function(){	
//	quando o botão receber um clique		   
$("button").click(function(){
// mostre-show o conteúdo da class que porventura esteja escondida-hide
var tete = $(this).next('.conteudo').show();

});

});
		
</script>

</head>

<body>

<div class="caixa">
    <button>categoria A</button>
    <div class="conteudo show  ">conteúdo da categoria A</div>
</div>
<!--  ========================================================  -->
<div class="caixa">
     <button>categoria B</button>
    <div class="conteudo hide ">conteúdo da categoria B</div>
</div>
<!--  ========================================================  -->
<div class="caixa">
     <button>categoria C</button>
    <div class="conteudo hide ">conteúdo da categoria C</div>
</div>
<!--  ========================================================  -->
</body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Omar~    87

Omar~
Postado

Seria isso?

Spoiler 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            button.accordion-control {
                background-color: #eee;
                color: #444;
                cursor: pointer;
                padding: 18px;
                width: 100%;
                text-align: left;
                border: none;
                outline: none;
                transition: 0.4s
            }
            button.accordion-control:hover {
                background-color: #ddd
            }
            .accordion-container {
                padding: 0 18px;
                background-color: #ffffff;
                height: 0;
                overflow: hidden;
                transition:all .5s ease
            }
         </style>
    </head>
    <body>
        <button class="accordion-control">Ancoração 1</button>
          <div class="accordion-container">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>
          </div>
          <button class="accordion-control">Ancoração 2</button>
          <div class="accordion-container">
              Segundo
          </div>
          <button class="accordion-control">Ancoração 3</button>
          <div class="accordion-container">
              Terceiro
          </div>
        <script>
          var Accordion = function () {
              var $accBtn = document.getElementsByClassName('accordion-control');
              var $accCont = document.getElementsByClassName('accordion-container');
              var $accNum = $accCont.length;
              var $i, $node, $height;
              for ($i = 0; $i < $accNum; $i++) {
                $accBtn[$i].addEventListener('click', openItens($i));
              }
              function openItens(elementId) {
                return function () {
                    $node = $accCont[elementId].cloneNode(true);
                    $node.setAttribute('style', 'height:auto; visibility:hidden');
                    $accCont[elementId].parentNode.appendChild($node);

                    $height = heightSetValue($node, 'height');
                    $accCont[elementId].setAttribute('style', 'height:' + $height);
                    $accCont[elementId].parentNode.removeChild($node);
                    if (heightSetValue($accCont[elementId], 'height') == $height) {
                        $accBtn[elementId].classList.remove('accordion-active');
                        $accCont[elementId].style.height = '0';
                    } else {
                        closeItens();
                        $accCont[elementId].style.height = $height;
                    }
                };
              }
              function heightSetValue(elItem, style) {
                if (window.getComputedStyle) {
                    return window.getComputedStyle(elItem, null).getPropertyValue(style);
                } else {
                    return elItem.currentStyle[style];
                }
              }
              function closeItens() {
                for ($i = 0; $i < $accNum; $i++) {
                    $accCont[$i].style.height = '0';
                }
              }
          };

          acc = new Accordion();
        </script>
    </body>
</html>

 

 

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