Make IF to give SlideUp in an element

Navigation
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 stops being display: none and becomes display: block , so 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 button to give a slideUp ?

    
asked by anonymous 01.12.2014 / 12:29

2 answers

1

You can simply check if there is the class you add when performing .slideDown() which is the unidadesHover class and then you make a if that performs .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><divclass="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>
    
01.12.2014 / 12:36
1

You can use the :visited selector to check whether or not the element is visible (which is what slideUp() and slideDown() do: they modify the element's visibility). For performance issues, I preferred to save 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><divclass="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>
    
01.12.2014 / 12:41
Prevent user from being logged in twice Error trying to generate PDF file with the same name