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 a pagina inc_aprendiz.php exibe na tela (select cores e select carros). Quero usar SOMENTE inc_aprendiz.php e aluno.php para obter o seguinte resultado:
       
      Ao visualizar no browser a pagina aluno.php gostaria que na 

      div class ="cores" exibisse somente select cores e na 
      div class ="carros" exibisse somente select carros
      ...
      inc_aprendiz.php
      <?php $cores = 'cores'; $carros = 'carros'; ?> <?php if($cores=='cores'){?> <?php $dados = array("verde" , "amarelo" , "azul" );?> <select name="cores" size="3" required> <?php for($i=0; $i <count($dados); $i++){?> <option><?php echo $dados[$i];?></option> <?php }?> </select> <?php }?> <?php if($carros=='carros'){?> <?php $dados = array("gol" , "fiat" , "palio" );?> <select name="carros" size="3" required> <?php for($i=0; $i <count($dados); $i++){?> <option><?php echo $dados[$i];?></option> <?php }?> </select> <?php }?> ...
      <?php $cores = 'cores'; $carros = 'carros'; ?> <?php include("inc_aprendiz.php");?> <h1>aluno.php</h1> <div class="cores" style="border:2px solid #D40000;"> <h2>cores</h2> </div> <hr style="margin:30px 0;"> <div class="carros" style="border:2px solid #D40000;"> <h2>carros</h2> </div>  
    • By Biel.
      Direto ao ponto. Pessoal abaixo temos EX1 e EX2, ambos exibe na tela o mesmo resultado. No EX1 note que (estrutura de repetição for) está DENTRO do <select> </select> 
      Existe alguma forma da (estrutura de repetição for) ficar FORA do <select> </select> e ainda assim obter o mesmo resultado que o EX2 ?
       
      EX 1 <?php $dados = array("verde", "amarelo", "azul" , "branco" ); //for($i=0; $i <count($dados); $i++){ ?> <select name="cores" required > <option value=""></option> <?php for($i=0; $i <count($dados); $i++){ ?> <option><?php echo $dados[$i];?></option> <?php }?> </select> <hr> EX 2 <select name="cores" required > <option></option> <option>verde</option> <option>amarelo</option> <option>azul</option> <option>branco</option> </select>  
    • By Biel.
      Olá Pessoal. Direto ao ponto. Pessoal gostaria que todas as imagens enviada não importando a extensão ficasse com extensão .jpg
      Ex: suponha que o colega enviou uma image com nome  aprendiz.bmp  ou  aprendiz.png  ou  aprendiz.gif  ou  aprendiz.tiff gostaria que quando upload fosse feito a imagem aparecesse dentro da pasta(UploadImagens/) com nome aprendiz.jpg
      Gostaria muito de resolver esta tarefa. obrigado !
      <?php if (isset($_POST["enviar"])){ $pasta1 = 'UploadImagens/'; $name_original_image_1 = $_FILES['a_image1']['name']; //echo "<h3>nome original da imagem </h3> " .$name_original_image_1; $tmp_name_1 = $_FILES['a_image1']['tmp_name']; // =================================== $explode1 = @end(explode('.',$name_original_image_1)); $extensao_enviada = $explode1; echo "<h3>você enviou a extensao ".$extensao_enviada.'</h3>'; // =================================== $new_name_image_1 = "NewName_".rand().'.'.$extensao_enviada; // =================================== // dimensão original da imagem list($width_original_1, $height_original_1) = getimagesize($tmp_name_1); // =================================== $x = 280; $y = 180; $new_dimension_image_1 = imagecreatetruecolor($x,$y); // =================================== $img_1 = imagecreatefromjpeg($tmp_name_1); // =================================== imagecopyresampled($new_dimension_image_1, $img_1, 0, 0, 0, 0, $x,$y, $width_original_1, $height_original_1); // =================================== $aaa = 55; $bbb = 55; // =================================== if($aaa == $bbb){ echo "<h2>UPLOAD REALIZADO COM SUCESSO</h2>"; imagejpeg($new_dimension_image_1,$pasta1.$new_name_image_1); } else{ echo "<h2>UPLOAD NAO FOI FEITO</h2>"; } // =================================== } ?> <div style="margin-left:20px;"> <form action="" method="post" enctype="multipart/form-data" > selecionar image<br> <input type="file" name="a_image1" required /> <input type="submit" name="enviar" value="Salvar" /> </form> </div>  
    • By Biel.
      Olá pessoal. Direto ao ponto. Pessoal suponha que agora é  22:15:27 e o site só tem uma página com nome index.php
      Gostaria que quando fosse por EX  23:11:36 a página index.php fosse atualizada intervenção do usuário. Como fazer isso com javascript? 
      Como não entendo nada de javascript não sei por onde começar, mas agradeço por qualquer sugestão ou dica. Obrigado !
    • By Biel.
      Olá pessoal . Direto ao ponto. Pessoal como faço para resolver a falta de extensão de imagem na biblioteca GD? Na web já existe dezenas de extensões que estão sendo usadas. Não sei como resolver este problema, mas pensei em duas possibilidades:
      1ª possibilidade: Se o colega enviar uma imagem com extensão que não está na regra if como resolver este problema?
      2ª possibilidade: Se o colega enviar uma imagem com extensão que não está na regra if como converter a extensão que foi enviada para (jpg)? e funcione tudo normalmente? Obrigado!
      <?php if (isset($_POST["enviar"])){ $pasta1 = 'uploadImagens/'; $name_original_image_1 = $_FILES['a_image1']['name']; $tmp_name_1 = $_FILES['a_image1']['tmp_name']; // =================================== $explode1 = @end(explode('.',$name_original_image_1)); $extensao_enviada = $explode1; echo "<h3>você enviou a extensao ".$extensao_enviada.'</h3>'; $new_name_image_1 = "NewName_".uniqid().'.'.$extensao_enviada; // =================================== //$extensao_permitida = array("png", "jpg", "jpeg", "gif"); //$comparar_dados = in_array($extensao_enviada,$extensao_permitida); // =================================== list($width, $hight) = getimagesize($tmp_name_1); $new_dimension_image_1 = imagecreatetruecolor(280,180); if($type == 'image/jpeg'){ $img = imagecreatefromjpeg($tmp_name_1); } //-------------------------------------- if($type == 'image/gif'){ $img = imagecreatefromjpeg($tmp_name_1); } //-------------------------------------- if($type == 'image/png'){ $img = imagecreatefromjpeg($tmp_name_1); } imagecopyresampled($new_name_image_1, $img, 0, 0, 0, 0, 280,180, $width, $hight); // =================================== $extensao = $extensao_enviada; if($extensao == 'png' || $extensao == 'jpg' || $extensao == 'gif'){ imagejpeg($new_dimension_image_1,$pasta1.$new_name_image_1); echo "<h2>opload realizado com sucesso</h2>"; } else{ echo "<h2>A extensão enviada não existe ou a biblioteca GD não dar suporte</h2>"; } // =================================== } ?> <div style="margin-left:20px;"> <form action="" method="post" enctype="multipart/form-data" > selecionar image<br> <input type="file" name="a_image1" required /> <input type="submit" name="enviar" value="Salvar" /> </form> </div>  
×

Important Information

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