1

Tenho um script que faz o toggle em uma DIV,quando o icon e clicado a div fara o toggle, os demais DIVS ficaram fechados, inicialmente usei o accordian do Jquery, entretanto não foi útil, pois o parentesco e quebrado devido a uma div de titulo, preciso comportamento se mantenham so na div em questao.

     $(".taskIcon").on("click", function () {
                var taskElementDetail = $(".taskDetail");
                taskElementOthers = taskElementDetail.parent().siblings().not(taskElementDetail);

                taskElementOthers
                    .hide();
                taskElementDetail
                    .show();
            });

 <section class="col-sm-12 col-xs-12">
        <div class="panel-group" <%--id="accordion"--%>>

          <div>  
            <h4>
               Titulo
            </h4>
            <div class="panel panel-default ">
                <div class="panel-heading">
                    <span class="col-sm-8">
                        <span><i class="fa fa-check" aria-hidden="true"></i></span>
                        descricao 
                    </span>
                    <span class="col-sm-1">
                        <a <%--data-toggle="collapse" data-parent="#accordion" href="#collapse1--%>"><i class="taskIcon glyphicon glyphicon-chevron-down"></i></a>
                    </span>
                </div>
                <div class="panel-collapse collapse taskDetail clearfix" <%--id="collapse1"--%>>
                    <div class="taskForm">
                        <p>
                           <small class="text-muted">detalhes</small> <br />
                           descricao
                        </p>
                    </div>
                </div>
            </div>
            <div class="panel panel-default task">
                <div class="panel-heading">
                    <span class="col-sm-8">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"><i class="taskIcon glyphicon glyphicon-chevron-down"></i></a>
                    </span>
                </div>
                <div class="panel-collapse collapse taskDetail" <%--id="collapse2"--%>>
                    <div>
                        <p>
                          descricao
                        </p>
                        <div class="inner-editor">
                            <input type="text" class="form-control" placeholder="Observacao">
                        </div>
                    </div>
                </div>
            </div>
          </div>
                 <div>  
            <h4>
               Titulo
            </h4>
            <div class="panel panel-default ">
                <div class="panel-heading">
                    <span class="col-sm-8">
                        <span><i class="fa fa-check" aria-hidden="true"></i></span>
                        descricao 
                    </span>
                    <span class="col-sm-1">
                        <a <%--data-toggle="collapse" data-parent="#accordion" href="#collapse1--%>"><i class="taskIcon glyphicon glyphicon-chevron-down"></i></a>
                    </span>
                </div>
                <div class="panel-collapse collapse taskDetail clearfix" <%--id="collapse1"--%>>
                    <div class="taskForm">
                        <p>
                           <small class="text-muted">detalhes</small> <br />
                           descricao
                        </p>
                    </div>
                </div>
            </div>
            <div class="panel panel-default task">
                <div class="panel-heading">
                    <span class="col-sm-8">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"><i class="taskIcon glyphicon glyphicon-chevron-down"></i></a>
                    </span>
                </div>
                <div class="panel-collapse collapse taskDetail" <%--id="collapse2"--%>>
                    <div>
                        <p>
                          descricao
                        </p>
                        <div class="inner-editor">
                            <input type="text" class="form-control" placeholder="Observacao">
                        </div>
                    </div>
                </div>
            </div>
          </div>
              </div>
    </section>
2
  • Teria um exemplo funcional? 8/11/2017 às 17:57
  • nao, a principio tinha feito com accordian, tive que mudar para o script 8/11/2017 às 17:58

2 Respostas 2

2

Acho que você está dificultado sua vida sem necessidade, tente classicar os elementos que deseja ocultar ou exibir, e utilize o $(this) para identificar o que foi clicado.

Entenda como funciona o this e qual sua diferença para $(this) do jquery.

Segue abaixo um exemplo:

//Ao clicar no elemento de classe detalhe entrará na função
$(".detalhe").on("click", function () {

    //Oculto todos elementos da classe grupo
    $(".grupo").hide(); 
    
    //Exibo o elemento da classe grupo mais proximo do clicado
    $(this).closest('.grupo').show();
});
.grupoFilho {
  border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section>
  <div class="grupo">
    <div class="grupoFilho">
      <span class="detalhe">
        Clique aqui para visualizar somente este grupo
      </span>
      <p>blablabla - 1</p>
    </div>
  </div>
  <div class="grupo">
    <div class="grupoFilho">
      <span class="detalhe">
        Clique aqui para visualizar somente este grupo
      </span>
      <p>blablabla - 2</p>
    </div>
  </div>
  <div class="grupo">
    <div class="grupoFilho">
      <span class="detalhe">
        Clique aqui para visualizar somente este grupo
      </span>
      <p>blablabla - 3</p>
    </div>
  </div>

</section>

1

Editei seu código pois como você deseja um funcionamento diferente do que o bootstrap oferece é melhor remover os atributos data-toggle, data-parent e href dos links.

Segue um exemplo do seu código editado e funcionando.

Para resolver foi necessário utilizar o $(this) do jQuery que é o elemento que está envolvido no evento quando existem muitos elementos com o mesmo seletor, que no seu caso foi o $('.taskDetail').

Foi necessário também selecionar a div que estava fora da div do ícone, por isso utilizei o closest.

$(".taskIcon").click(function () {
  $('.taskDetail').hide();
  $(this).closest('div').next('div').show();
});
.taskDetail {
  display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="col-sm-12 col-xs-12">
  <div class="panel-group" id="accordion">

    <div>  
      <h4>
         Titulo
      </h4>
      <div class="panel panel-default ">
        <div class="panel-heading">
          <span class="col-sm-8">
            <span><i class="fa fa-check" aria-hidden="true"></i></span>
            descricao 
          </span>
          <span class="col-sm-1">
            <a><i class="taskIcon glyphicon glyphicon-chevron-down"></i></a>
          </span>
        </div>
        <div class="taskDetail clearfix" id="collapse1">
          <div class="taskForm">
            <p>
               <small class="text-muted">detalhes</small> <br />
               descricao
            </p>
          </div>
        </div>
      </div>
      <div class="panel panel-default task">
        <div class="panel-heading">
          <span class="col-sm-8">
            <a ><i class="taskIcon glyphicon glyphicon-chevron-down"></i></a>
          </span>
        </div>
        <div class="taskDetail">
          <div>
            <p>
              descricao
            </p>
            <div class="inner-editor">
              <input type="text" class="form-control" placeholder="Observacao">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>  
      <h4>
         Titulo
      </h4>
      <div class="panel panel-default ">
        <div class="panel-heading">
          <span class="col-sm-8">
            <span><i class="fa fa-check" aria-hidden="true"></i></span>
            descricao 
          </span>
          <span class="col-sm-1">
            <a ><i class="taskIcon glyphicon glyphicon-chevron-down"></i></a>
          </span>
        </div>
        <div class="taskDetail clearfix" id="collapse3">
          <div class="taskForm">
            <p>
               <small class="text-muted">detalhes</small> <br />
               descricao
            </p>
          </div>
        </div>
      </div>
      <div class="panel panel-default task">
        <div class="panel-heading">
          <span class="col-sm-8">
            <a ><i class="taskIcon glyphicon glyphicon-chevron-down"></i></a>
          </span>
        </div>
        <div class="taskDetail" id="collapse4">
          <div>
            <p>
              descricao
            </p>
            <div class="inner-editor">
              <input type="text" class="form-control" placeholder="Observacao">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

1

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .