Question

Still a noob when it comes to this part of programming. I have a question regarading something I “solved” with the toggle function. I have 3 buttons ( placed in different divs on the page, so it’s not a tab toggle ). What I try to achieve is when I have a button active and I click on another one, I want the active one to be closed. I looked up some jfiddle posts here with something similar, tried to implement it to the page and figure it out myself but nothing worked for me so far. The function I currently use for one button is

<script type="text/javascript">
  $(function() {
    $('#toggle5').click(function() {
        $('.infotext').fadeToggle('fast');
        return false;
    });
  });
</script>  

It works just fine for one button to close and open it, but I have no idea where to start when I want two more buttons and let them interact with each other as mentioned before. Anybody has an idea how to do that ? And is the toggle function even the right function here ? I’d like to thank in advance for what ever answer I get here, great community.

Answer 1

Here is a good fiddle.

$("a").click(function(e) {
    var tClass = $(this).attr("id"),
        content = $("div.content." + tClass),
        link = $(this);

    $("div.content:not('." + tClass + "')").fadeOut("fast");
    $("a").not(link).text("Open");
    content.fadeToggle("fast", function() {
        link.hide().text((content.is(":visible") ? "Close" : "Open")).fadeIn("fast");
    });

    e.preventDefault();
});​