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?
 
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>
                  <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
 
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
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.