Hide and show according to button ID

Question

Hide and show according to button ID

Navigation

#1 by (0 votes)

0

Well, I have a problem with Jquery, JS I have a set of buttons with the initials of each name, I would like to make them appear with their divs when clicking and when I click on another, the previous one disappears and only the other appears, I have already been able to make it appear when clicking, it will appear as I go by clicking on the others

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  @foreach($letras as $letra)
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button data-letra="{{$letra->letra}}" type="button" class="btn btn-secondary showDiv">{{$letra->letra}}</button>
  </div>
  @endforeach
</div>


  @foreach($exames as $key => $exame)
  <div class="list-group space" style="display: none" id="{{$key}}">
    @foreach($exame as $exameAux)
      <div id="accordion" role="tablist" aria-multiselectable="true">
        <div class="card">
          <div style="background-color:#f7f7f9 !important" class="card-header" role="tab" id="headingOne">
            <h5 class="mb-0">
              <a class="collapse-icon" data-toggle="collapse" data-parent="#accordion" href="#{{ $exameAux->id }}" aria-expanded="true" aria-controls="collapseOne">
                <i style="color:#0a5f55;" class="fa fa-plus"></i>
                &nbsp;{{ $exameAux->exame }}
              </a>
            </h5>
          </div>
          <div id="{{ $exameAux->id }}" class="collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="card-body">
              <p><strong>Material</strong>: {{ $exameAux->material }}</p>
              <p><strong>Tempo em Jejum</strong>: {{ $exameAux->tempo_jejum }}</p>
              <p><strong>Observações</strong>: {{ $exameAux->obs }}</p>
            </div>
          </div>
        </div>
      </div>
    @endforeach
  </div>
  @endforeach

His JS is like this

<script type="text/javascript">
$(".showDiv").click(function(){
    var letra = $(this).data('letra');
    $("#" + letra).fadeIn();
  });

</script>

jquery laravel

asked by anonymous 11.04.2018 / 21:14

1 answer

Change string using function parameter Include internal pages in Google search

score 0 · Accepted Answer

You can make fadeOut() or hide() in div s before fadeIn() .

For this you can get the div s for the classes:

$(".showDiv").click(function(){
    $("div.list-group.space").fadeOut(); // pode usar hide() se não quiser o efeito
    var letra = $(this).data('letra');
    $("#" + letra).fadeIn();
});

Example:

$(".showDiv").click(function(){
    $("div.list-group.space").fadeOut();
    var letra = $(this).data('letra');
    $("#" + letra).fadeIn();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="btn-group mr-2" role="group" aria-label="First group">
    <button data-letra="div1" type="button" class="btn btn-secondary showDiv">{{$letra->letra}}</button>
  </div>
  <div class="list-group space" style="display: none" id="div1">
      <div id="accordion" role="tablist" aria-multiselectable="true">
        <div class="card">
          <div style="background-color:#f7f7f9 !important" class="card-header" role="tab" id="headingOne">
            <h5 class="mb-0">
              <a class="collapse-icon" data-toggle="collapse" data-parent="#accordion" href="#{{ $exameAux->id }}" aria-expanded="true" aria-controls="collapseOne">
                <i style="color:#0a5f55;" class="fa fa-plus"></i>
                &nbsp;{{ $exameAux->exame }}
              </a>
            </h5>
          </div>
          <div id="{{ $exameAux->id }}" class="collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="card-body">
              <p><strong>Material</strong>: 1{{ $exameAux->material }}</p>
              <p><strong>Tempo em Jejum</strong>: {{ $exameAux->tempo_jejum }}</p>
              <p><strong>Observações</strong>: {{ $exameAux->obs }}</p>
            </div>
          </div>
        </div>
      </div>
  </div>
  
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button data-letra="div2" type="button" class="btn btn-secondary showDiv">{{$letra->letra}}</button>
  </div>
  <div class="list-group space" style="display: none" id="div2">
      <div id="accordion" role="tablist" aria-multiselectable="true">
        <div class="card">
          <div style="background-color:#f7f7f9 !important" class="card-header" role="tab" id="headingOne">
            <h5 class="mb-0">
              <a class="collapse-icon" data-toggle="collapse" data-parent="#accordion" href="#{{ $exameAux->id }}" aria-expanded="true" aria-controls="collapseOne">
                <i style="color:#0a5f55;" class="fa fa-plus"></i>
                &nbsp;{{ $exameAux->exame }}
              </a>
            </h5>
          </div>
          <div id="{{ $exameAux->id }}" class="collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="card-body">
              <p><strong>Material</strong>: 2{{ $exameAux->material }}</p>
              <p><strong>Tempo em Jejum</strong>: {{ $exameAux->tempo_jejum }}</p>
              <p><strong>Observações</strong>: {{ $exameAux->obs }}</p>
            </div>
          </div>
        </div>
      </div>
  </div>