Hide everything but the clicked element

Question

Hide everything but the clicked element

Asked 7 years, 1 month ago

Viewed 153 times

1

I have a script that toggle in a DIV,when the icon and clicked the div make the toggle, the other DIVS were closed, initially I used the accordian of Jquery, however it was not useful, because the kinship and broken due to a div of title, precise behavior remain only in the div in question.

     $(".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>

It would have a functional example?

– Rafael Augusto

2017/11/08 at 17:57
no, at first I had done with accordian, I had to switch to the script

– Marcelo Batista

2017/11/08 at 17:58

2 answers

2

I think you are hampered your life needlessly, try to classicize the elements you want to hide or display, and use the $(this) to identify what was clicked.

Understand how the this and what’s your difference to $(this) of jquery.

Below is an example:

//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>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.

by Laércio Lopes • **4,352** points · Answer 1 · 2017-11-08T19:11:33+00:00

I edited your code because as you want a different operation than the bootstrap offers it is better to remove the attributes data-toggle, data-parent and href of the links.

Follow an example of your code edited and working.

To solve it was necessary to use the $(this) jQuery which is the element that is involved in the event when there are many elements with the same selector, which in your case was the $('.taskDetail').

It was necessary also to select the div that was outside the div of the icon, so I used the 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>