Hide everything but the clicked element

Question

Hide everything but the clicked element

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I have a script that does the toggle in a DIV, when the icon is clicked the div will make the toggle, the other DIVS are closed, initially I used the Jquery accordian, however it was not useful, since the kinship is broken due to a title div, precise behavior should 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>

jquery

asked by anonymous 08.11.2017 / 18:55

2 answers

1

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

Here's an example of your edited and working code.

To resolve it was necessary to use the $(this) of 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 $('.taskDetail') .

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

08.11.2017 / 20:11

Search for similarity in mongo Error in php if, login authentication system

score 2 · Accepted Answer

I think you're making life difficult for yourself, try classifying the elements you want to hide or display, and use $(this) to identify what you've clicked.

Understand how this works and what its difference to < a $ (this) href="https://en.stackoverflow.com/questions/37770/qual-a-diferen%C3%A7a-entre-this-e-this-e-this"> $ (this) jquery .

Here 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><divclass="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>