Home/ Questions/Q 8780315
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T20:00:49+00:00

I’ve got three elements with IDs albums, about, and contact, and three links to

  • 0

I’ve got three elements with IDs “albums”, “about”, and “contact”, and three links to show/hide them via the toggle() function, with IDs “togglealbums”, “toggleabout”, and “togglecontact”. I only want one of these elements to be able to be seen at any time, so I wrote the following functions:

$('#togglealbums').click(function() {
  if( $('#about').is(':visible') ) {
    $('#about').toggle(function() {
      $('#albums').toggle();
    });
  } else if( $('#contact').is(':visible') ) {
    $('#contact').toggle(function() {
      $('#albums').toggle();
    });
  } else {
    $('#albums').toggle();
  }
});

$('#toggleabout').click(function() {
  if( $('#albums').is(':visible') ) {
    $('#albums').toggle(function() {
      $('#about').toggle();
    });
  } else if( $('#contact').is(':visible') ) {
    $('#contact').toggle(function() {
      $('#about').toggle();
    });
  } else {
    $('#about').toggle();
  }
});

$('#togglecontact').click(function() {
  if( $('#albums').is(':visible') ) {
    $('#albums').toggle(function() {
      $('#contact').toggle();
    });
  } else if( $('#about').is(':visible') ) {
    $('#about').toggle(function() {
      $('#contact').toggle();
    });
  } else {
    $('#contact').toggle();
  }
});

First of all, if these are wildly inefficient or there is an easier way to do this, please let me know.

What I’ve found is that if none of the three DIVs is visible, clicking one of the toggle links will show/hide the respective div with no animation. However, if one of the DIVs is visible, clicking another toggle link will cause the div to shrink and fade and the new one expands and fades in, which I don’t want (at least for now). This can be seen here: http://new.e17.paca.arvixe.com.

Can anyone tell me why this is happening?

Thanks!

EDIT:

Markup is here:

<body>
  <div id="main">
    <div id="nav">
      <div id="menu">
        <ul>
          <li><a href="#" id="togglealbums">Albums</a></li>
          <li><a href="#" id="toggleabout">About Me</a></li>
          <li><a href="#" id="togglecontact">Contact</a></li>
        </ul>
      </div>
    </div>
    <div id="albums">
      Albums go here
    </div>
    <div id="about">
      About info goes here
    </div>
    <div id="contact">
      Contact info goes here
    </div>
  </div>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your shrink-and-fade was happening because, if .toggle() is given a callback function, it assumes you want to animate the toggle instead of just switching it on/off. (According to the docs, as of this writing, that’s only supposed to happen when you provide a duration. I’ve submitted a bug report about this.)

    See http://jsfiddle.net/mblase75/byKeP/1/ for a reduced example of this. To solve it, just remove the callbacks and put the same code in the next line of your function.

    As for streamlining your code, classes are your friends. HTML:

    <a href="#" class="togglelink" data-block="albums" id="togglealbums">toggle albums</a>
<a href="#" class="togglelink" data-block="about" id="toggleabout">toggle about</a>
<a href="#" class="togglelink" data-block="contact" id="togglecontact">toggle contact</a>

<div class="toggleblock" id="albums">ALBUMS</div>
<div class="toggleblock" id="about">ABOUT</div>
<div class="toggleblock" id="contact">CONTACT</div>

    Note the data- attributes, which jQuery will parse and make accessible through the .data() method. This makes it easy to store a unique div ID on the hyperlink itself, which in turn streamlines our JavaScript immensely. JS:

    $('.togglelink').on('click',function(e) {
    var id = $(this).data('block');
    $('#'+id).toggle().siblings('.toggleblock').hide();
});​

    http://jsfiddle.net/mblase75/byKeP/

    • 0