Respostas:
A maneira correta de fazer isso é usar show
e hide
:
$('#id').hide();
$('#id').show();
Uma maneira alternativa é usar o método css do jQuery :
$("#id").css("display", "none");
$("#id").css("display", "block");
$(".class").css("display", "none");
$('#id').css('display', 'none');
, mas não funcionou. No entanto, usar $('#id').css('color', 'red');
funciona. Não sei por que, no entanto. Alguém tem alguma idéia? Desde já, obrigado.
Existem várias maneiras de conseguir isso, cada uma com seu próprio objetivo.
1. ) Para usar inline enquanto simplesmente atribui a um elemento uma lista de coisas a fazer
$('#ele_id').css('display', 'block').animate(....
$('#ele_id').css('display', 'none').animate(....
2. ) Para usar ao definir várias propriedades CSS
$('#ele_id').css({
display: 'none'
height: 100px,
width: 100px
});
$('#ele_id').css({
display: 'block'
height: 100px,
width: 100px
});
3. ) Para chamar dinamicamente o comando
$('#ele_id').show();
$('#ele_id').hide();
4. ) Alternar dinamicamente entre bloco e nenhum, se for um div
$ ('# ele_id'). toggle ();
Se a exibição da div estiver bloqueada por padrão, você pode simplesmente usar .show()
e .hide()
, ou ainda mais simples, .toggle()
alternar entre a visibilidade.
Para ocultar:
$("#id").css("display", "none");
Para mostrar:
$("#id").css("display", "");
Maneira simples:
function displayChange(){
$(content_id).click(function(){
$(elem_id).toggle();}
)}
(function($){
$.fn.displayChange = function(fn){
$this = $(this);
var state = {};
state.old = $this.css('display');
var intervalID = setInterval(function(){
if( $this.css('display') != state.old ){
state.change = $this.css('display');
fn(state);
state.old = $this.css('display');
}
}, 100);
}
$(function(){
var tag = $('#content');
tag.displayChange(function(obj){
console.log(obj);
});
})
})(jQuery);
Caso deseje ocultar e mostrar um elemento, dependendo se ele já está visível ou não, você pode usar alternar em vez de .hide()
e.show()
$('elem').toggle();
No meu caso, eu estava exibindo / ocultando elementos de um formulário, dependendo se um elemento de entrada estava vazio ou não, de modo que, ao ocultar os elementos, o elemento após os ocultos fosse reposicionado ocupando seu espaço, era necessário fazer um float: left do elemento desse elemento. Mesmo usando um plugin como DependOn era necessário usar float.
Usa isto:
$("#id").(":display").val("block");
Ou:
$("#id").(":display").val("none");
<style> #choosepath { display: none; } </style> <script> $(document).ready(function () { $('#btn_journey').click(function () { alert("button click"); $('#choosepath').css({"display":"normal"}); }); }); </script> </head> <body> <a href="#" class="btn btn-primary btn-lg" id="btn_journey">Start your journey</a> <div class="col-lg-3 col-md-6 mb-4" id="choosepath"> </div> </body></html>
Usar:
$(#id/.class).show()
$(#id/.class).hide()
Este é o melhor caminho.
#id
usado para IDs, e se eu quiser usarclass
?