jQuery sliding divs

I have three image buttons and once I click on one of them a sliding div containing text appears.

Here is my JavaScript code:

    <script type="text/javascript">
    function showSlidingDiv() {
        $("#slidingDiv开发者_开发知识库").animate({
            "height": "toggle"
        }, {
            duration: 300
        })
    }
    function showSlidingDiv2() {
        $("#slidingDiv2").animate({
            "height": "toggle"
        }, {
            duration: 300
        })
    }
    function showSlidingDiv3() {
        $("#slidingDiv2").animate({
            "height": "toggle"
        }, {
            duration: 300
        })
    }
    </script>

The function is triggered with this command:

    <a href="#" onClick="showSlidingDiv(); return false;">

The script works fine but currently if I click all the links the content appends to each other - what I would like to achieve is to hide an open div class once I click on a new link.

How would I do this?

I would recommend using jQuery accordion plugin.

Update: You can close all divs and open the one selected:

    function toggleDiv(selectedDiv) {
      // shortcut to select all sliding divs
      $('div[id^="sliding"]').animate({
              "height": "toggle"
          }, {
              duration: 300
          }, function () {
                $(selectedDiv).show();
      });
              }

In your hrefs, call the function like this:

onClick="toggleDiv('#slidingDiv1'); // use slidingDiv2, 3 for other hrefs