Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Jquery to hide previous div and open new div

Posted on 2012-08-17
6
Medium Priority
?
614 Views
Last Modified: 2012-08-21
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>
0
Comment
Question by:lgduong
  • 3
  • 2
6 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38307195
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
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38307645
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
 

Author Comment

by:lgduong
ID: 38311728
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 60

Accepted Solution

by:
Julian Hansen earned 1200 total points
ID: 38312586
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
 

Author Comment

by:lgduong
ID: 38316130
Yes, that is similar to what I am looking for.  Thanks.
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38316184
you are welcome
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month20 days, 23 hours left to enroll

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question