Jquery show/hide toggle

Hi all I am trying to make a section on a site that can toggle between hiding and showing div elements. What i want to do is have between 2-3 links at the top of a div that when clicked show the corresponding div underneath all the links. my html is

<div class="left">
       
       <div class="leftbottom"><a href="#" id="1" class="link"
name="1">comment</a>  <a href="#" id="2" class="link"
name="2">comment</a></div>
       <div id="box1" class="box"
style="display:none">comment form</div>


<div id="box2" class="box"
style="display:none">comment form</div>
     </div>

I would like this all to work in a kind of accordion manner so that only one div id shown at a time and there is a sliding transition between them. I have this script already that will individually show each element but not swap between showing different elements

$(document).ready(function() {
$('#box').hide();
$('a.link').click(function() {
        var id = $(this).attr('id');
     $('#box' + id).toggle(500);
        // alert(id);
     return false;
     });
});


any help much appreciated cheers
Alex500Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

qwerty021600Commented:
Refer to this link.. May be of help
http://docs.jquery.com/Tutorials:Basic_Show_and_Hide
0
TeazerMDCommented:
From my experience .hide() doesn't work.
I would recommend using the following:
  $('#box' + id).attr("style","visibility:hidden;"); - to hide
  $('#box' + id).attr("style","visibility:visible;"); - to show
0
Alex500Author Commented:
Not really helpful I already know about showing hiding individual elements. need to know how to toggle between showing and hiding multiple elements.
0
TeazerMDCommented:
Ok, here are the things you need to do:
1. Place all elements that have to be hidden/showed on that action in a div, let's call him: "toggle_div"
2. use the $("#toggle_div").find("div").each(function(){ ... code here ... }). This will navigate though all the divs inside the "toggle_div".
3. Have a global variable that will hold the id/key of the div that has to be visible, let's call it active_div.
4. inside the function (), you should have something like:
{
  if(this.attr("id")==active_div)
{
  this.attr("style", "visibilty:visible;");
}else{
 this.attr("style","visibility:hidden");
}
}
0
Alex500Author Commented:
In the end ive gone for this!

<div id="contacts">
                  <span class="label contact-us">Contact me</span>
                  <div class="people-toggle"></div>
                  <div id="location">
                        <img src="" />
                        <p class="address"><span>Alexander Vince,</span> 137, Brooke Road, London, N16 7RP</p>
                        <p class="phone">+44 (0)7827 326 227</p>
                        <p class="email"><a href="mailto:admin@alexandervince.com">admin@alexandervince.com</a></p>
                  </div>
                  <div id="people">
                        <ul>
                              <li>
                                    <img src="" />
                                    <h4><a href="mailto:admin@alexandervince.com">Alexander Vince</a></h4>
                                    <p>Technical Director</p>
                              </li>
                              
                        </ul>
                  </div>
            </div>
      </div>
   



jQuery.fn.slideshow = function(){
      jQuery(this).find('img:not(:first-child)').hide();
      
      var i = 0;      
      var links = [];
      
      jQuery.each(jQuery(this).find('img'), function(){
            i++;
            
            links.push('<a href="' + this.src + '" title="' + this.title + '">' + i + '</a>');
      });
      
      if(i > 1){
            jQuery(this).append('<div class="slideshow-nav">' + links.join('') + '</div>');
      }
      
      jQuery(this).find('.slideshow-nav a').live('click', function(e){
            e.preventDefault();
            
            jQuery(this).parents('.slideshow').find('img').hide();
            
            jQuery(this).parents('.slideshow').find('img[src=' + jQuery(this).attr('href') + ']').toggle();
      });
}

jQuery.fn.exists = function(){ return jQuery(this).length > 0; }

jQuery(document).ready(function($){
      $('#project-description').find('p:first').addClass('first');
      
      $('#projects li').click(function(){ document.location = $(this).find('a').attr('href'); });
            
      $('.slideshow').slideshow();
      
      $('#people').hide();
      
      $('.people-toggle').html('<a href="#" class="active">Location</a> / <a href="#">People</a>');
      
      $('.people-toggle a').live('click', function(e){
            e.preventDefault();
            
            if(!$(this).hasClass('active')){
                  $('.people-toggle a').toggleClass('active');
                  $('#people, #location').slideToggle(400);
            }
      });
});

ver long but works cheers for your help!
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.