Skip to main content
removeu 3 caracteres do conteúdo
Fonte Link
Paulo Roberto Rosa
  • 9,2mil
  • 10
  • 43
  • 75

Você simplesmente pode verificar se há a classe que você adiciona ao realizar o .slideDown() que é a classe unidadesHover e então você faz um elseif que realiza o .slideUpslideDown() caso esta classe exista, e remove-a.

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

Você simplesmente pode verificar se há a classe que você adiciona ao realizar o .slideDown() que é a classe unidadesHover e então você faz um else que realiza o .slideUp() caso esta classe exista, e remove-a.

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

Você simplesmente pode verificar se há a classe que você adiciona ao realizar o .slideDown() que é a classe unidadesHover e então você faz um if que realiza o .slideDown() caso esta classe exista, e remove-a.

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

deixei o código mais elegante
Fonte Link
Paulo Roberto Rosa
  • 9,2mil
  • 10
  • 43
  • 75

Você simplesmente pode verificar se há a classe que você adiciona ao realizar o .slideDown() que é a classe unidadesHover e então você faz um else que realiza o .slideUp() caso esta classe já exista, e remove-a.

$('.unidadesTotal').click(function () {
    if(!$(this).parent().find('.unidades').hasClass('unidadesHover')){ //se não hávar aunidades classe unidadesHover
       = $(this).parent().find('.unidades').addClass('unidadesHover');
     var unidadesConteudo = $(this).parent().find('.unidadesConteudo').slideDown();
    }elseif(unidades.hasClass('unidadesHover')){
  //se houver a classe .unidadesHover
     $(this).parent().find('.unidades') unidades.removeClass('unidadesHover');
        $(this)unidadesConteudo.parentslideUp();  
    }else{
      unidades.findaddClass('.unidadesConteudo''unidadesHover');
      unidadesConteudo.slideUpslideDown();  
    }
});
<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>

Você simplesmente pode verificar se há a classe que você adiciona ao realizar o .slideDown() que é a classe unidadesHover e então você faz um else que realiza o .slideUp() caso esta classe já exista, e remove-a.

$('.unidadesTotal').click(function () {
    if(!$(this).parent().find('.unidades').hasClass('unidadesHover')){ //se não há a classe unidadesHover
        $(this).parent().find('.unidades').addClass('unidadesHover');
        $(this).parent().find('.unidadesConteudo').slideDown();
    }else{
         $(this).parent().find('.unidades').removeClass('unidadesHover');
        $(this).parent().find('.unidadesConteudo').slideUp();
    }
});
<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>

Você simplesmente pode verificar se há a classe que você adiciona ao realizar o .slideDown() que é a classe unidadesHover e então você faz um else que realiza o .slideUp() caso esta classe já exista, e remove-a.

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

Fonte Link
Paulo Roberto Rosa
  • 9,2mil
  • 10
  • 43
  • 75

Você simplesmente pode verificar se há a classe que você adiciona ao realizar o .slideDown() que é a classe unidadesHover e então você faz um else que realiza o .slideUp() caso esta classe já exista, e remove-a.

$('.unidadesTotal').click(function () {
    if(!$(this).parent().find('.unidades').hasClass('unidadesHover')){ //se não há a classe unidadesHover
        $(this).parent().find('.unidades').addClass('unidadesHover');
        $(this).parent().find('.unidadesConteudo').slideDown();
    }else{
        $(this).parent().find('.unidades').removeClass('unidadesHover');
        $(this).parent().find('.unidadesConteudo').slideUp();
    }
});
<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>