JQuery disable table row toggle when one row already toggled

Question

I have a table or articles and a toggle on each row that displays the child row content. In the child row I also display Disqus comments. This all works fine but I do not want multiple rows opened up all at once and multiple Disqus comments loading, slowing down my page.

I want to disable all toggle buttons when one toggle is activated. Each toggle link (class option_toggle) and the row it's on has a unique ID. See below. How can I accomplish this via JQuery?

  //Hide main article table's options row $(document).ready(function() { $(".option_toggle").click(function(e) { e.preventDefault(); aid = $(this).attr('id'); //Determine if we are showing the comments or hiding the comments is_hidden = $(this).parent().parent().next(".options_row").is( ":hidden" ); if(is_hidden) { disqus_container = '#disqus_container_' + aid; jQuery('<div id="disqus_thread"></div>').insertBefore(disqus_container); $.ajax({ type: 'POST', url: 'http://www.example.com/disqus', data: {'msmm_tn' : '12d406df3c8b2e178893e2c146d318e5', 'aid' : aid}, dataType: 'json', success : function(data) { if (data) { $('#disqus_container_' + aid).html(data.script); DISQUS.reset({ reload: true, config: function () { this.page.url = 'http://www.example.com/#!'+ aid; this.page.remote_auth_s3 = data.payload; this.page.identifier = aid; this.page.api_key = "cULB96iURBu1pZOtLOOSVlVgBj10SY9ctXWiv0eiQdzhdxqBq9UgmVr5SeSiaFiP"; } }); } } }); } else { //Remove the comments $('#disqus_container_' + aid).prev('#disqus_thread').remove(); $('#disqus_container_' + aid).html(''); } $(this).parent().parent().next(".options_row").toggle("fast"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <tbody> <tr class="main_row" data-id="ROWID428272"> <td class="bkgcol-sunflower wht-border"> <td> <a id="428272" class="option_toggle" href="#" title="Ratings/Comments"> </td> <td class="key-title dark unpadded"> <td class="artcl_info text-center">Scitech</td> <td class="text-center" style="width:10px"> <td class="text-center"> </tr> <tr class="options_row" style="display: table-row;"> <td colspan="6"> <div class="row article_options"> <div class="row comments_row"> <div id="comments" class="col-md-12"> <div class="text-center article_title top_pad" style="width: 100%;">Comment on This Article</div> <div id="disqus_thread"> <div id="disqus_container_428272"> </div> </div> </td> </tr> <tr class="main_row" data-id="ROWID427694"> 

Answer 1

I want to disable all toggle buttons when one toggle is activated.

$(".option_toggle").click(function(e) {
    e.preventDefault();

    // Remove click event handler defined above, and add a new one which prevents
    // the click from doing anything
    $(".option_toggle").off('click').on('click', function(e) {
        e.preventDefault();
    });

    aid = $(this).attr('id');
    // Continue with rest of your code ...
});

But is this really what you want? It means once you click a toggle, you cannot click any others. It also means all other toggles still look like links, maybe you should update styling to indicate they are disabled or something like that, eg add a disabled class and style that:

Javascript:

$(".option_toggle").addClass('disabled-link');

CSS:

a.disabled-link {
    cursor: default;
    color: #666;
    text-decoration: none;        
}