Do IF to give Slideup on an element

Asked

Viewed 154 times

2

I have the following HTML:

<div class="unidadesTotal">
    <div class="unidades">tituloSYS</div>
    <div style="display:none" class="unidadesConteudo margin-top-25">
        <div class="margin-left-10">    <span>descricaoSYS</span>

        </div>
        <div class="atendimento unidadesAtendimento margin-top-15 f-left">hor&aacute;rio de atendimento</div>   <a href="codigoSYS" target="_blank"><div class="unidadesAtendimento unidadesLocalizacao margin-top-15 margin-left-10 f-left">ver localiza&ccedil;&atilde;o</div></a>

    </div>
</div>

The unidadesTotal is a button, when I click on it the unidadesConteudo let it be display:None and becomes display:block, So far perfect, here’s my Jquery:

$('.unidadesTotal').click(function () {
    $(this).parent().find('.unidades').addClass('unidadesHover');
    $(this).parent().find('.unidadesConteudo').slideDown();
});

How would I make an IF for the Give One button slideup?

jquery

2 answers

1


You can simply check if there is the class you add when performing the .slideDown() which is the class unidadesHover and then you make a if that realizes the .slideDown() if this class exists, and remove it.

$('.unidadesTotal').click(function () {
    var unidades         = $(this).parent().find('.unidades');
    var unidadesConteudo = $(this).parent().find('.unidadesConteudo');
    if(unidades.hasClass('unidadesHover')){ //se houver a classe .unidadesHover
      unidades.removeClass('unidadesHover');
      unidadesConteudo.slideUp();  
    }else{
      unidades.addClass('unidadesHover');
      unidadesConteudo.slideDown();  
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="unidadesTotal">
    <div class="unidades">tituloSYS</div>
    <div style="display:none" class="unidadesConteudo margin-top-25">
        <div class="margin-left-10">    <span>descricaoSYS</span>

        </div>
        <div class="atendimento unidadesAtendimento margin-top-15 f-left">hor&aacute;rio de atendimento</div>   <a href="codigoSYS" target="_blank"><div class="unidadesAtendimento unidadesLocalizacao margin-top-15 margin-left-10 f-left">ver localiza&ccedil;&atilde;o</div></a>

    </div>
</div>

  • The !$ is the "else", right? I haven’t worked with him yet, with Jquery.

  • 1

    the ! is an operator who denies the subsequent condition, for example.: if (!true) means false and if(!false) means true

  • 1

    You could also reverse things, remove the ! and exchange place codes with each other, leaving the .slideDown() in the else and the .slideUp() in the if, also works :D

  • I edited the answer so that it will be better understood for you.

  • 1

    The explanation was perfect!

1

You can use the selector :visited to check whether the item is visible or not (which is what the slideUp() and the slideDown() do: they modify the visibility of the element). For performance reasons, I preferred to keep the element reference in a variable, but it would work without it.

$('.unidadesTotal').click(function () {
    var unidadesConteudo = $(this).parent().find('.unidadesConteudo');
    $(this).parent().find('.unidades').addClass('unidadesHover');
  
    if(unidadesConteudo.is(':visible')) {
      unidadesConteudo.slideUp();
    } else {
      unidadesConteudo.slideDown();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="unidadesTotal">
    <div class="unidades">tituloSYS</div>
    <div style="display:none" class="unidadesConteudo margin-top-25">
        <div class="margin-left-10">    <span>descricaoSYS</span>

        </div>
        <div class="atendimento unidadesAtendimento margin-top-15 f-left">hor&aacute;rio de atendimento</div>   <a href="codigoSYS" target="_blank"><div class="unidadesAtendimento unidadesLocalizacao margin-top-15 margin-left-10 f-left">ver localiza&ccedil;&atilde;o</div></a>

    </div>
</div>

Browser other questions tagged jquery

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