Jquery to hide previous div and open new div

I am able to open and hide 2 divs.  See my code.  However, if I have multiple div, how do I know which div was open so that if I click on another div, it would know to close the open div.

For example, I have a
Click here 1
Click here 2
Click here 3
Click here 4
and so forth

Let say a div is open (it could be any of div). If I click on "click here 2", it would know close the open div and open div 2.

My code for open and close between 2 divs:

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

<script type="text/javascript">
      $(function()
      {
            $("#first-div-section").click(function()
            {
                  $("#second-div-section").hide();
                  $("#first-div-section").animate({ height:'600px' }, 'slow');
                  
            }

            $("#second-div-section").click(function()
            {
                  $("#first-div-section").hide();
                  $("#second-div-section").animate({ height:'600px' }, 'slow');
                  
            }            
      }
</script>
lgduongAsked:
Who is Participating?
 
Julian HansenCommented:
Not sure I fully understand what you want but here is another attempt
I am working on the premise that you have some divs that if you click them other divs open and close
This should do what you want
<div id="first-div-section" class="togglesource"></div>
<div id="second-div-section" class="togglesource"></div>
<div id="third-div-section" class="toggledsource"></div>

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

<script type="text/javascript">
$(function() {
  $('div.togglesource').click(function() {
      $('toggletarget').hide();
      $('#' + $(this).attr('id') + '_panel')..animate({ height:'600px' }, 'slow');
  });
});
</script>

Open in new window

0
 
Tom BeckCommented:
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/
0
 
Julian HansenCommented:
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>

Open in new window

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

Open in new window


That should do it.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
lgduongAuthor Commented:
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";
      }
}
0
 
lgduongAuthor Commented:
Yes, that is similar to what I am looking for.  Thanks.
0
 
Julian HansenCommented:
you are welcome
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.