Vtiger - Jquery slideToggle randomly toggles twice

Question

I made a widget in the summary view of the account module. In this widget i want to use a slideToggle to show some details. Sometimes the code works perfectly but other times it double toggles and instantly closes the details.

JS:

    $(document).ready(function() {
        $('.potential_single_title').on('click',function(e) {
            $(this).parent().find('.potential_comment_list').slideToggle('slow');
        });
    });

TPL:

<script src="resources/ChildCommentScript.js"></script>
<link rel="stylesheet" type="text/css" href="resources/ChildCommentStyle.css">

{strip}
    <div class="potential_comment_container">
    {foreach from=$OPP key=K item=POT}
        <br />
        <div class="potential_single">
            <div class="potential_single_title">
                <strong>{$POT[1]}</strong> <span class="potential_assignee">Assigned to : {$POT[2]}</span>
            </div>
            <hr>
            <div class="potential_comment_list">
                <div class="commentContainer">
                {foreach from=$COM[$K] item=POTCOM}
                    <div class="commentDetails" style="width:100%;">
                        <div class="span1">
                            <img class="alignMiddle pull-left" src="layouts/vlayout/skins/images/DefaultUserIcon.png">
                        </div>
                        <span class="commentorName"><strong> {$POTCOM[0]}</strong></span>
                        <span class="pull-right"><p class="muted"><small>{$POTCOM[1]}</small></p></span>
                        <div class="commentInfoContent">{$POTCOM[2]}</div>
                    </div>
                {/foreach}
                </div>
            </div>
        </div>
    {/foreach}
    </div>
{/strip}

Answer 1

Usage of slide toggle seems to be correct. I suspect the click is happening twice sometimes which is causing slide again. Modifying JS to reject clicks if slide action is happening might resolve the issue.

$(document).ready(function() {
    var sliding = false;
    $('.potential_single_title').on('click',function(e) {
        if(sliding) return false;
        sliding = true;
        $(this).parent().find('.potential_comment_list').slideToggle('slow', function() {sliding = false;});
    });
});

Simple flag to reject click action while sliding is included!

Answer 2

This is just to show how to see if the click is happening twice.

 $(document).ready(function() {
            $('.potential_single_title').on('click',function(e) {
                console.log("clicked")
            });
        });

for one click.. if in console you see clicked twice you can assume your trigger happy ;-)

try also putting a debugger in there... may highlight things

$(document).ready(function() {
                $('.potential_single_title').on('click',function(e) {
                    console.log("clicked");
debugger;
                });
            });

in chrome the debugger console must be open for it to hit the debugger line.

just want to rule out stupid things.. this is one for one what is on the page no other js... like maybe your wrapping $(document).ready( twice or something and just havnt included that code in the question?