Jquery to hide previous div and open new div

You would not need to know which div is expanded, just collapse all of them each time a new button or link is clicked. Better yet, just make the divs clickable and skip the "click here" buttons or links. Either way, you would not need a click event defined for each element. That would make for a ton of repetitious coding. In fact, you don't even need a unique id for each clickable element. Just put all the clickable elements inside a parent container and use that as your initial selector in the jquery.

Here's a jsfiddle example that uses an unordered list where the list items are clickable, but the idea is the same. The list items expand in height when clicked. Note how little jquery is needed to accomodate any number of clickable child elements.

http://jsfiddle.net/tommyBoy/4R3mh/

There are two ways of doing this
1. Remember which div was open you can do this by assigning a class to it - that way any div that has that class is the open one and you can do what needs to be done and remove the class when it is closed
2. If you want all divs to be closed except the one that has been clicked on then close all divs first then open the one that has been clicked.
The latter is shown below

<div id="first-div-section" class="divtotoggle" style="display: none"></div>
<div id="second-div-section" class="divtotoggle" style="display: none"></div>

Select allOpen in new window

The script

<script type="text/javascript">
      $(function()
      {
            $('div.divtotoggle').click(function () {
               $('div.divtogoggle').hide();
               $(this).animate({ height:'600px' }, 'slow');
            });
      }
</script> 

Select allOpen in new window

That should do it.

julianH,

Your second mention work.  This is a good logic that I didn't think of, but should have.  
However, that is not exactly how I want it.  Your method doesn't take into consideration that the div (class: divtotoggle) are hidden/invisible so how can it be click.  The initial display is set to "none".

Maybe I wasn't clear in my explanation.  I need the "click here" to be the trigger to hide/show the other div.  How do I pass the "first-div-section" as an argument/parameter into the "test" onclick??  Can that be done?

This is what I have done:
<div id="test" style="text-decoration:underline; font-weight:bold; color:red;">Click here to show div 1</div>

<script type="application/javascript">
      $('#test').click(function()
      {
            $('#first-div-section').toggle();
      });
</script>

The old method using javascript:
<img src="...." onclick="ExpandCollapse('first-div-section'); " />

function ExpandCollapse(divID)
{
      if(document.getElementById(divID).style.display == "none")
      {
            document.getElementById(divID).style.display = "block";
      }
      else
      {
            document.getElementById(divID).style.display = "none";
      }
}

Yes, that is similar to what I am looking for.  Thanks.

you are welcome