How to show/hide content on click

Question

I am trying to find a solution to open one div by clicking a link, and close/toggle all other open div s at the same time.

This is my code: http://jsfiddle.net/6Ptkw/1/

I thought this was the right way, but it doesn't work.

Answer 1

you were close, but note that jsfiddle by default wraps everything in an onDomReady function closure, meaning that your slideonlyone function is no longer visible.

http://jsfiddle.net/6Ptkw/5/

the jsFiddle you posted would have code like this

$(function(){
    function slideonlyone(){
        //your code   
    };

});

one that onDomReady function exits, you would no longer have any scope at which to reference the slideonlyone function

I changed it to nowrapper, so that it would be available at the global scope. This is generally bad practice, and you should attach the click events via

$("a").click(function(){

})

rather than doing <a href="javascript:">

Answer 2

you can try this code (just adopt it to your elements) this "slides open" a div element:

$('#workload').click(function(){
        $('#work').load('pagehere.jsp');
        $('#work').animate({
        height: '25%',
        fontSize: "3em",
        borderWidth: "10px"
    }, 1000 );   });

The just hide other elements with with the .hide() function. :) hope this helps a bit!