Question

I have the following script which slides a container down and another up, and vice versa depending on the condition of closed/enabled variables.

The script works fine in firefox, however in IE and Chrome, it just doesnt work 🙁

Can anyone please advise?

Many thanks! heres the script.

(The OCH var takes the height of a continer which elements are loaded into via ajax, so it then knows when to open it again how many px to open to – is this the best way?)

            $(document).ready(function()
            {
                //Grab the height of the container after its loaded with all the calls in...
                var och = $('#calls').height();
                //Are we allowed to close this panel yet?
                var enabled = false;
                //is the panel closed or not?
                var closed = false;
                $(".survey-description").click(function () {
                    if (enabled == true) {
                        if (closed == false) {
                            $(this).closest("#calls").stop().animate({"height": "44px"}, "fast");
                            closed = true;
                        }
                        else {
                            $(this).closest("#calls").stop().animate({"height": och}, "medium");
                            closed = false;
                        }
                    }
                });

                $(".linktoCall").click(function () {
                    if (closed == false) {
                        //Now we can toggle the top panel...
                        enabled = true;
                        $(this).closest("#calls").stop().animate({"height": "44px"}, "fast");
                        closed = true;
                    }
                });

            });

EDIT here is some html of the rendered elements.

<div id="survey-description"></div>
<div id="calls">
    <div>
        <p onclick="showCall('tgkn5xabgnivkaf');" id="notstarted" class="linktoCall">59677 tgkn5xabgnivkaf<br>NOT STARTED - SAVED</p>
    </div>
</div>

<div id="aCall">
</div>

Answer 1

Looking at the HTML snippet I guess it should be

<div class="survey-description"></div>

because the selector $('.survey-description') refers to a class, not an id.