Question

I have an ajax request which brings in new posts and each post has a toggle button to show and hide an element which is hidden by default.

The below code works, but with the inserted ajax data it only works the first time (open) and not the second (close)

$(".voice_btn").live( 'click', function(){
    $(this).toggleClass('active voice_btn');
    $(this).closest('.element').children('.voice_box').toggle(300);
    $('.tipsy').hide();
    $(this).attr("title", ($(this).hasClass("active")?"Close":"Open") + " voicebox");
    return false;
});

Answer 1

just update line 2 to only toggle the active class, because after the first time your code runs the voice_btn class is removed, and your live function is no longer attached to your element:

$(".voice_btn").live( 'click', function(){
    $(this).toggleClass('active'); // <- notice the change in this line
    $(this).closest('.element').children('.voice_box').toggle(300);
    $('.tipsy').hide();
    $(this).attr("title", ($(this).hasClass("active")?"Close":"Open") + " voicebox");
    return false;
});