0

Estou desenvolvendo uma ação em javascript para minimizar e voltar uma div ao tamanho normal,e está funcionando corretamente, minha única dificuldade é deixar essa ação exclusiva ao pressionar o "botão". O que está acontecendo é quando em um "botão" a ação e feita em todas as divs. Tentarei explicar melhor com imagens.

inserir a descrição da imagem aqui

Quando clico em qualquer um do botões, a ação é executada em todos, gostaria que fosse apenas no que cliquei.

inserir a descrição da imagem aqui

Código da div:

<div class="row" style="margin-top: 20px;">
  <div class="col-md-12">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <button class="btn-minimize"></button>
        <img src="<?php echo $this->crud_model->get_image_url($post['created_by'], $post['created_by_' . $post['created_by']]);?>">
        <span class="name"><?= $creator->name ?> <small style="font-weight: 500;">/ publicado para: <b><?= $postClassName ?></b> na categoria <b><i class="<?= $category->icon ?>"></i> <?= $category->name ?></b></small></span>
        <span class="date"><?= $post['created_at'] ?></span>
      </div>
      <div class="panel-body">

Código do javascript/jquery:

$(".btn-minimize").click(function(){
$(this).toggleClass('btn-plus');
$(".panel-body").slideToggle();

});

1 Resposta 1

1

Olá,

Seu código esta funcionando justamente como o programado, vamos as observações. Perceba que você da o slideToggle em todas as divs com a classe panel-body, isso inclui a que você clicou e a que você não clicou. Para solucionar isso, vamos utilizar as funções parent() e children() do jQuery para pegar a div de classe panel-body, mas somente do elemento clicado.

A função parent é responsável por pegar o elemento pai daquele em questão na árvore do DOM. Já a função children, por pegar o filho daquele elemento na árvore do DOM. Vamos ao código:

$(".btn-minimize").click(function(){
    $(this).toggleClass('btn-plus');

    // Volta até o elemento "panel-primary" e pega seu filho cuja classe seja "panel-body"
    $(this).parent().parent().children(".panel-body").slideToggle(); 
});



Espero ter ajudado, abraço!

2
  • Show!!! Muito obrigado. Funcionou perfeitamente.
    – user144209
    Commented 30/05/2019 às 1:51
  • Inteligente a solução, agradeço também.
    – ElvisP
    Commented 30/05/2019 às 1:59

Você deve fazer log-in para responder a esta pergunta.