Jump to content
Biel.

mostrar e esconder um class="conteudo" por vez

Recommended Posts

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>

 

Share this post


Link to post
Share on other sites

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>

 

 

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.
      Direto ao ponto. Pessoal abaixo temos 
      Ex1 que imprime A,B,C,D
      Ex2 que imprime A,B,C,D,A
      No EX2 letra A está se repetindo. Gostaria que não se repetisse. Pensei em duas possibilidades:

      a 1º possibilidade é ignorar que existe no array duas letras A , ou seja não importa quantas letras A tenha no array, será exibido apenas uma letra A
      a 2º possibilidade é criar uma regra if, else e se porventura for adicionado no array dados iguais a regra if else vai impedir que isso ocorra.
      Pessoal não sei por onde começar, mas acredito que a idéia sugerida pode ser válida para que a tarefa seja resolvida. Obrigado.
      ...
      Ex1
      <?php $dados = array("A" , "B" , "C" , "D" ); shuffle($dados); for($a = 0; $a <count($dados); $a++){ $exibe = $dados[$a].' <br> '; echo ($exibe); } ?> Ex2
      <?php $dados = array("A" , "B" , "C" , "D" "A" ); shuffle($dados); for($a = 0; $a <count($dados); $a++){ $exibe = $dados[$a].' <br> '; echo ($exibe); } ?>  
    • By Biel.
      Direto ao ponto. Pessoal abaixo temos EX1 e EX2 . Gostaria que  EX2 tivesse o mesmo resultado que  EX1 e que o ano mudasse automaticamente quando o mês de dezembro acabasse, Vejam:
      EX1
      abril-2019 maio-2019 junho-2019 julho-2019 agosto-2019 setembro-2019 outubro-2019 novembro-2019 dezembro-2019 janeiro-2020 fevereiro-2020 março-2020 Ex2
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <?php setlocale(LC_ALL, 'portuguese'); date_default_timezone_set('America/Sao_Paulo'); $dia = date('d'); $mes = date('n'); $ano = date('Y'); $meses = array(1 => "janeiro", "fevereiro", "março", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro"); $mes_atual = $meses[$mes]; $ano_atual = $ano; echo "<b>mes atual:</b> ".$mes_atual.'<br />'; echo "<b>ano atual:</b> ".$ano_atual; ?> <hr /> <?php if($mes_atual == 'janeiro'){ $tete = array("janeiro", "fevereiro", "março", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro"); } //----------------------------------- elseif($mes_atual == 'fevereiro'){ $tete = array("fevereiro", "março", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro", "janeiro"); } //----------------------------------- elseif($mes_atual == 'março'){ $tete = array("março", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro", "janeiro", "fevereiro"); } //----------------------------------- elseif($mes_atual == 'abril'){ $tete = array( "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro" , "janeiro", "fevereiro", "março"); } //----------------------------------- elseif($mes_atual == 'maio'){ $tete = array("maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro" , "janeiro", "fevereiro", "março" , "abril"); } //----------------------------------- elseif($mes_atual == 'junho'){ $tete = array("junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro" , "janeiro", "fevereiro", "março", "abril", "maio"); } //----------------------------------- elseif($mes_atual == 'julho'){ $tete = array("julho", "agosto", "setembro", "outubro", "novembro", "dezembro", "janeiro", "fevereiro", "março", "abril", "maio", "junho"); } //----------------------------------- elseif($mes_atual == 'agosto'){ $tete = array("agosto", "setembro", "outubro", "novembro", "dezembro", "janeiro", "fevereiro", "março", "abril", "maio", "junho", "julho"); } //----------------------------------- elseif($mes_atual == 'setembro'){ $tete = array("setembro", "outubro", "novembro", "dezembro", "janeiro", "fevereiro", "março", "abril", "maio", "junho", "julho", "agosto"); } //----------------------------------- elseif($mes_atual == 'outubro'){ $tete = array("outubro", "novembro", "dezembro", "janeiro", "fevereiro", "março", "abril", "maio", "junho", "julho", "agosto", "setembro"); } //----------------------------------- elseif($mes_atual == 'novembro'){ $tete = array("novembro", "dezembro", "janeiro", "fevereiro", "março", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro"); } //----------------------------------- elseif($mes_atual == 'dezembro'){ $tete = array("dezembro", "janeiro", "fevereiro", "março", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro" ); } //----------------------------------- for($a=0; $a <count($tete); $a++){ $exibe = $tete[$a].'-'.'<br/>'; echo $exibe; } ?>  
    • By Biel.
      Direto ao ponto. Pessoa abaixo temos Ex1 e Ex2 . No Ex1 como faço para deixar disabled ( terça, quarta e sábado). Obrigado por sua atenção!
      Ex1
      <select name="semanas" size="7" style="font-size:20px;" required> <?php $dados = array("segunda", "terça", "quarta", "quinta", "sexta", "sábado", "domingo" ); for($a=0; $a <count($dados); $a++){ $exibe = $dados[$a]; ?> <option value="<?php echo $exibe; ?>" ><?php echo $exibe; ?></option> <?php } ?> </select> Ex2
      <select name="semanas" size="7" style="font-size:20px;" required> <option value="segunda" >seg</option> <option value="terça" disabled="disabled">ter</option> <option value="quarta" disabled="disabled">qua</option> <option value="quinta" >qui</option> <option value="sexta" >---</option> <option value="sábado" disabled="disabled">sab</option> <option value="domingo" >dom</option> </select>  
    • By Biel.
      Ola pessoal estou tentando imprimir 2019 2020 e 2021 três vezes usando apenas um for. Assim
       
      2019
      2020
      2021
      --------
      2019
      2020
      2021
      --------
      2019
      2020
      2021
      <?php  for($i=2019; $i <=2021; $i++){         echo $i .'<br />';         } ?>  
    • By Biel.
      Executar codigo php sem submit ou com submit e que a página não seja atualizada
      Pessoal o código php abaixo está funcionando normalmente, e após o submit  onChange="this.form.submit()" a página é atualizada. Gostaria que o código php abaixo funcionasse com submit ou sem submit, mas que a página não fosse atualizada . Dizem que é possível fazer isso com ajuda do javascript, jquery ou ajax. Como não sei nada de javascript, não sei por onde começar. Amigo, obrigado por sua atenção.  Nota:  Gostaria que o código php, html javascript ficasse tudo em uma só página. 
      <form action="" method="post" > <select name="teste" required size="3" onChange="this.form.submit()"> <option value="" ></option> <option value="aprendizA" >aprendizA</option> <option value="aprendizB" >aprendizB</option> </select> <hr /> <?php if (isset($_POST["teste"])){ ?> <?php if ($_POST['teste'] == ''){ ?> exibe 000 <?php } elseif ($_POST['teste'] == 'aprendizA'){ ?> exibe AAA <?php } elseif ($_POST['teste'] == 'aprendizB'){ ?> exibe BBB <?php } } ?> <hr /> <input type="text" name="gggg" required value="" /> </form>  
×

Important Information

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