CODEWITHSUNDEEP
javascriptjquery
dericcain
dericcain

Reputation: 2290

jQuery with multiple slideToggle

I have a few forms that are initially hidden on a page. When a user clicks on a specific link on the page, the corresponding form shows using the jQuery slideToggle. The way that I am doing it right now seems convaluted and there has to be a more succinct way of doing it. Can anyone help me be more efficient in doing this, i.e., less code, best practice, etc.?

    // Show & Hide the forms on the "We need your help" page
        jQuery('.contribute-form').hide();
        jQuery('.translate-form').hide();
        // Contribute Form
        jQuery('.contribute').on('click', function(){
            if(jQuery('.translate-form').css('display', 'block')){
                jQuery('.translate-form').slideToggle('slow');
                jQuery('.contribute-form').slideToggle('slow');
            } else if(jQuery('.donate-form').css('display', 'block')){
                jQuery('.donation-form').slideToggle('slow');
                jQuery('.contribute-form').slideToggle('slow');
            } else {
                jQuery('.contribute-form').slideToggle('slow');
            }
        });
        // Translate Form
        jQuery('.translate').on('click', function(){
            if(jQuery('.donate-form').css('display', 'block')){
                jQuery('.donate-form').slideToggle('slow');
                jQuery('.translate-form').slideToggle('slow');
            } else if(jQuery('.contribute-form').css('display', 'block')){
                jQuery('.contribute-form').slideToggle('slow');
                jQuery('.translate-form').slideToggle('slow');
            } else {
                jQuery('.translate-form').slideToggle('slow');
            }
        });
       // Donate Form
        jQuery('.donate').on('click', function(){
            if(jQuery('.translate-form').css('display', 'block')){
                jQuery('.translate-form').slideToggle('slow');
                jQuery('.donate-form').slideToggle('slow');
            } else if(jQuery('.contribute-form').css('display', 'block')){
                jQuery('.contribute-form').slideToggle('slow');
                jQuery('.donate-form').slideToggle('slow');
            } else {
                jQuery('.donate-form').slideToggle('slow');
            }
        });

Upvotes: 0

Views: 73

Answers (1)

isherwood
isherwood

Reputation: 61056

First, use the dollar alias for cleaner code. Then, combine selectors in single statements. Finally, use the is() method with :visible rather than fiddling with CSS. 

jQuery(function($) {
    $('.contribute').on('click', function(){
        if ( $('.translate-form').is(':visible') ) {
            $('.translate-form, .contribute-form').slideToggle('slow');
        } else if ( $('.donate-form').is(':visible') ) {
            $('.donation-form, .contribute-form').slideToggle('slow');
        } else {
            $('.contribute-form').slideToggle('slow');
        }
    });
});

I'm sure your logic could be simplified further using classes and DOM traversal. If you'd like to put your code in a demo at http://jsfiddle.net we could offer more suggestions.

Upvotes: 1

Related Questions