javascript toggle script

I have this js code, which display and hide some content on a page after click on a button. I've added second script (slickbox2), which do the same with another content by clicking on 2nd button. The problem I need to resolve is when 1st content is displayed and I click on 2nd button, I want to hide the 1st content. Thank you!

jQuery(document).ready(function() {
    //hides the slickbox as soon as the DOM is ready
    jQuery('#slickbox').hide();

    // toggles the slickbox on clicking the noted link  
    jQuery('#slick-togg开发者_如何学运维le').click(function() {
        jQuery('#slickbox').toggle(400);
        return false;
    });

    jQuery('#slickbox2').hide();
    // toggles the slickbox on clicking the noted link  
    jQuery('#slick-toggle2').click(function() {
       jQuery('#slickbox2').toggle(400);
       return false;
    });

});

---

Changed a few points.

$(document).ready(function(){
    $('[id*=slickbox]').hide(); //hide your slickboxs

    $('#slick-toggle').click(function(){
        $('#slickbox').show();
        $('#slickbox2').hide();
    });

    $('#slick-toggle2').click(function(){
        $('#slickbox').hide();
        $('#slickbox2').show();
    });
});

---

BTW You can use $ in place of jQuery in all of your code:

jQuery('#slick-toggle2').click(function() {
    jQuery('#slickbox2').toggle(400);
    $('#slickbox1').toggle(400);
    return false;
});

---

First of all you need to give class to all slickboxes e.g. slickbox then your Javascript would be like

    <script type="text/javascript">
    jQuery(document).ready(function() {
        $('.slickbox').hide();      //hides all elements with class slickbox

        $('.slickbox').click(function(){
             $('.slickbox').hide();
             $(this).toggle(400);
        })
    });
    </script>

---

You can use hide() function to always hide the first content when clicking on the second button

jQuery('#slick-toggle2').click(function() {
  jQuery('#slickbox').hide(400);
  jQuery('#slickbox2').toggle(400);
  return false;
});

Don't use toggle or the content will appear if it was hidden