Switch/Toggle Div (jQuery)
-
09-09-2019 - |
Pergunta
Desejo realizar uma tarefa bastante simples (espero!)
Eu tenho duas tags div e 1 tags de ancoragem, como esta:
<a href="javascript:void(0);">forgot password?</a>
<div id="login-form"></div>
<div id="recover-password" style="display:none;"></div>
O que desejo realizar é usar a tag Anchor para alternar entre as duas tags div, ocultar uma e mostrar o outro e vice -versa.
Como isso pode ser feito da melhor maneira?
Atenciosamente.
Solução
Como uma div está inicialmente oculta, você pode simplesmente ligar alternar para ambos os divs:
<a href="javascript:void(0);" id="forgot-password">forgot password?</a>
<div id="login-form">login form</div>
<div id="recover-password" style="display:none;">recover password</div>
<script type="text/javascript">
$(function(){
$('#forgot-password').click(function(){
$('#login-form').toggle();
$('#recover-password').toggle();
});
});
</script>
Outras dicas
Eu acho que você quer isso:
$('#recover-password').show();
ou
$('#recover-password').toggle();
Isso é possível por jQuery
Espero que isto ajude...
Que tal agora
<script type="text/javascript" language="javascript">
$("#toggle").click(function() { $("#login-form, #recover-password").toggle(); });
</script>
Para o seu HTML parece:
<a id="toggle" href="javascript:void(0);">forgot password?</a>
<div id="login-form"></div>
<div id="recover-password" style="display:none;"></div>
Ei, tudo bem! Uma linha! Eu <3 jQuery.
Você pode escrever um plugin jQuery simples para fazer isso. O plugin seria:
(function($) {
$.fn.expandcollapse = function() {
return this.each(function() {
obj = $(this);
switch (obj.css("display")) {
case "block":
displayValue = "none";
break;
case "none":
default:
displayValue = "block";
}
obj.css("display", displayValue);
});
};
} (jQuery));
Em seguida, conecte o plug -in até o evento de clique para a tag Anchor:
$(document).ready(function() {
$("#mylink").click(function() {
$("div").expandcollapse();
});
});
Desde que você defina os atributos iniciais de 'exibição' para cada div para ser 'bloco' e 'nenhum', respectivamente, eles devem mudar para serem mostrados/ocultos quando o link é clicado.
Eu acho que isso funciona
$(document).ready(function(){
//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide();
//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$("h2.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
return false; //Prevent the browser jump to the link anchor
});
});
Eu usei essa maneira de fazer isso para vários blocos sem conjurar o novo JavaScript:
<a href="#" data-toggle="thatblock">Show/Hide Content</a>
<div id="thatblock" style="display: none">
Here is some description that will appear when we click on the button
</div>
Em seguida, uma parte JS para todos esses casos:
$(function() {
$('*[data-toggle]').click(function() {
$('#'+$(this).attr('data-toggle')).toggle();
return false;
});
});
Descrito aqui
É assim que eu alterno dois div ao mesmo tempo:
$('#login-form, #recover-password').toggle();
funciona !
function toggling_fields_contact_bank(class_name) {
jQuery("." + class_name).animate({
height: 'toggle'
});
}