Using jquery 'resize' with function

Question

I am having some trouble using jquery 'resize' to make sure my function works on both loading a mobile or manual resize of window. Here's my jQuery

if ( $('.generic').is('*') ) {

            function contactDropDown() {

                if ( $(window).width() < 768 ) {

                    var formDown = $('.mobile-form-expander img');
                    var hiddenForm = $('.template-e form:hidden');

                    formDown.click(function() {
                        var south = $(this).attr("src");
                        var north = $(this).attr("data-swap");
                        hiddenForm.slideToggle("fast");
                        $(this).attr('src', north).attr("data-swap", south);
                    })
                }
            }

        $(window).on('resize', contactDropDown);
        // $(window).on('load resize', contactDropDown);

        }

I originally had this simplified as:

if ( $(window).width() < 768 ) {

                    var formDown = $('.mobile-form-expander img');
                    var hiddenForm = $('.template-e form:hidden');

                    formDown.click(function() {
                        // var south = $(this).attr("src");
                        // var north = $(this).attr("data-swap");
                        hiddenForm.slideToggle("fast");
                        // $(this).attr('src', north).attr("data-swap", south);
                    })
                }
            }

The original function was working but I needed it to work on manual resize as well, so I used the above method which usually works for me. Problem is, now my expandable menu works when resizing, then clicking but it jumps up and down repeatedly. Any help is much appreciated.

Here's the HTML:

<div class="content template template-e">
        <div class="main-wrap">
            <h1>Contact Us</h1>
            <p class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <div class="container">
                <div class="row">
                    <div class="col-md-6 contact-left">
                        <div class="row">
                            <div class="mobile-form-expander">
                                <p>Contact Form<img src="/sites/all/themes/merge/img/blue-down.png" data-swap="/sites/all/themes/merge/img/blue-up.png" /></p>
                            </div><!--end mobile-form-expander-->
                            <form class="generic">
                                <div class="control-group col-sm-6">
                                    <label for="first-name">First Name*</label>
                                    <input id="first-name" type="text">
                                </div><!--end control-group-->
                                <div class="control-group col-sm-6">
                                    <label for="last-name">Last Name*</label>
                                    <input id="last-name" type="text">
                                </div><!--end control-group-->
                                <div class="control-group col-sm-6">
                                    <label for="state">State*</label>
                                    <select name="state" id="state">
                                        <option value="nc">NC</option>
                                    </select>
                                    <!-- <label for="state">State*</label>
                                    <input id="state" type="text"> -->
                                </div><!--end control-group-->
                                <div class="control-group col-sm-6">
                                    <label for="zip">Zip Code*</label>
                                    <input id="zip" type="text">
                                </div><!--end control-group-->
                                <div class="control-group full">
                                    <label for="comments">Comments*</label>
                                    <textarea id="comments"></textarea>
                                </div><!--end control-group-->
                                <div class="control-group col-sm-4">
                                    <input id="submit" type="submit" class="body-button" value="send">
                                </div><!--end control-group-->
                            </form>
                        </div><!--end row-->
                    </div><!--end contact-left-->
                    <div class="col-md-6 contact-right">
                        <div class="contact-block">
                            <h2>Phone Numbers</h2>
                            <p>Admissions Direct: 478-445-1283 or 478-445-2774</p>
                            <p>Toll Free (in Georgia): 1-800-342-0471</p>
                            <p>Main GC Switchboard: 478-445-5004</p>
                        </div><!--end contact-block-->
                    </div><!--end contact-right-->
                </div><!--end row-->
            </div><!--end container-->
        </div><!--end main-wrap-->
    </div><!--end content-->

Answer 1

Forgive me if I'm missing the point a little here, but it might be an idea to abstract any resize functionality out into an onResize() function and then run that on document.ready() or after and init() functions you may have.

Then run that on window.resize() to cover you for any manual resizing of the window.

So you onResize() function would check the window width and perform any necessary functions. This means that you could also revert back using the else{} if need be.

I'd like to say that are better ways of organising this but I wouldn't like to stray to far from what you have. Also I think if ( $('.generic').is('*') ) { would be a little more efficient as if ( $('.generic').length ) { if all you want to do is check its existence.