स्विच/टॉगल div (jQuery)

Question

मैं एक काफी सरल कार्य (! मुझे आशा है कि)

मैं दो div टैग और 1 लंगर टैग, इस तरह मिल गया पूरा करना चाहते हैं पूरा करने के लिए एंकर टैग का उपयोग दो div टैग के बीच टॉगल करने के लिए करें, एक को छुपाएं और दूसरा दिखाएं और इसके विपरीत।

यह कैसे किया जा सकता है सबसे अच्छा तरीका?

सर्वश्रेष्ठ संबंध।

Answer 1

के बाद से एक div शुरू में छिपा हुआ है, तो आप बस दोनों divs के लिए toggle कॉल कर सकते हैं:

<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> 

Answer 2

आप ऐसा करने के लिए एक साधारण jQuery प्लगइन लिख सकते हैं। प्लगइन इस तरह दिखेगा:

(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));

तब एंकर टैग के लिए क्लिक करें घटना अप करने के लिए प्लगइन तार: प्रत्येक div के लिए जिम्मेदार बताते हैं क्रमशः 'ब्लॉक' और 'कोई नहीं' होने के लिए

$(document).ready(function() { 
    $("#mylink").click(function() { 
     $("div").expandcollapse(); 
    }); 
}); 

प्रदान करना आप प्रारंभिक 'प्रदर्शन' सेट है कि, वे लिंक क्लिक होने पर दिखाया/छुपाया जाना चाहिए।

Answer 3

मुझे लगता है कि आप इस हैं:

$('#recover-password').show(); 

या

$('#recover-password').toggle(); 

यह वह जगह है JQuery

द्वारा संभव बनाया गया

आशा इस मदद करता है ...

Answer 4

इस

<script type="text/javascript" language="javascript"> 
    $("#toggle").click(function() { $("#login-form, #recover-password").toggle(); }); 
</script> 

अपने HTML के लिए के बारे में की तरह लग रही कैसे:

<a id="toggle" href="javascript:void(0);">forgot password?</a> 
<div id="login-form"></div> 
<div id="recover-password" style="display:none;"></div> 

अरे, ठीक! एक पंक्ति! मैं < 3 jQuery।

Answer 5

मैं इस काम करता है

$(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 
    }); 

}); 

Answer 6

कोशिश लगता है कि यह http://www.webtrickss.com/javascript/jquery-slidetoggle-signup-form-and-login-form/

Answer 7

मैं इस तरह से कई ब्लॉकों के लिए ऐसा करने के लिए नई जावास्क्रिप्ट जादू के बिना इस्तेमाल:

<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> 

तो सभी के लिए एक js भाग ऐसे मामले:

$(function() { 
    $('*[data-toggle]').click(function() { 
    $('#'+$(this).attr('data-toggle')).toggle(); 
    return false; 
    }); 
}); 

वर्णित here

Answer 8

इस तरह मैं एक ही समय में दो div टॉगल:

$('#login-form, #recover-password').toggle(); 

यह काम करता है!

Answer 9

function toggling_fields_contact_bank(class_name) { 
      jQuery("." + class_name).animate({ 
       height: 'toggle' 
      }); 
     }