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"
       <div id="box1" class="box"
style="display:none">comment form</div>

<div id="box2" class="box"
style="display:none">comment form</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() {
$('a.link').click(function() {
        var id = $(this).attr('id');
     $('#box' + id).toggle(500);
        // alert(id);
     return false;

any help much appreciated cheers
Who is Participating?
Alex500Connect With a Mentor Author 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 id="people">
                                    <img src="" />
                                    <h4><a href="mailto:admin@alexandervince.com">Alexander Vince</a></h4>
                                    <p>Technical Director</p>

jQuery.fn.slideshow = function(){
      var i = 0;      
      var links = [];
      jQuery.each(jQuery(this).find('img'), function(){
            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){
            jQuery(this).parents('.slideshow').find('img[src=' + jQuery(this).attr('href') + ']').toggle();

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

      $('#projects li').click(function(){ document.location = $(this).find('a').attr('href'); });
      $('.people-toggle').html('<a href="#" class="active">Location</a> / <a href="#">People</a>');
      $('.people-toggle a').live('click', function(e){
                  $('.people-toggle a').toggleClass('active');
                  $('#people, #location').slideToggle(400);

ver long but works cheers for your help!
Refer to this link.. May be of help
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
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.
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:
  this.attr("style", "visibilty:visible;");
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.