Text does not return to default when different toggle is closed

Question

I am having no success at getting my text to return to it's default value when a different toggled div is clicked upon. Everything else seems to work great except for this one thing. What am I missing in my code? I end up having to click the other div again before it will finally return to the default text.

 function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

var menu;
$(document).ready(function () {
    $('.bio_container').hide();
    $('.bio_button').click(function () {
        menu = $("#" + $(this).data("menu"));
        $(".bio_container:not(#" + menu.attr("id") + ")").slideUp();
        var biobutton = $(this);
        menu.slideToggle(function(){
            biobutton.text($(this).is(':visible') ? '« Close Biography' : 'Read Full Biography »');
        });
    });
});

Here's a fiddle so you can see where I am so far.

Answer 1

You are not actively updating the other button's text on click, you're almost there.

Missing line inside the slideToggle function:

$(".bio_button").not(biobutton).text('Read Full Biography »');

See updated JSFiddle. Please understand that this is a quick hack though, and that the many selectors are not performing too greatly - which won't matter much if you don't have many menus to slide.