JQuery Swapping the Toggle of elements, one at a time

Question

I'm new to JQuery and I'd like to know if you've got any idea regarding how to accomplish the following with JQuery instead of JScript:

You have a group of a's within a top div:

<h3>
<a id="acer" href="#acerca">acerca</a> |
<a id="cur" href="#cursos">cursos y clases</a> |
<a id="cal" href="#calendario">calendario</a> |
<a id="con" href="#contacto">contacto</a>
</h3>

And below them, inside the same container div, there's four content divs, one after the other, each belonging to each of the a's above:

<div id="acerca"></div>
<div id="cursos"></div>
<div id="calendario"></div>
<div id="contacto"></div>

Now, the idea here is that we start off by closing all of these content div's but one, the first: acerca, which is visible to the user:

$(document).ready(function(){

    $("#cursos,#calendario,#contacto").hide();

});

Now, using the h3 a's at the top, I want the following behaviour to take place:

1.- If I click a different item than the one open by default (acerca), then close the currently open one and show me the new one. 2.- If I click the same item which is already open (acerca), then nothing happens: there must always be one content div open at all times. 3.- If possible, using #anchors to mask the ugly "javascript:;" of the old days.

This is very simple with the use of JavaScript's onclick function (save for #3) but, I'm somehow getting stuck with JQuery.

Help is greatly appreciated Sotkra

Answer 1

I'd assign a common class to all the DIVs so I could reference them collectively. When one of the anchors is selected, I'd remove any "selected" classes from all of the DIVs, then apply a "selected" class to the DIV that should be shown. I would then hide all DIVs that don't have the selected class and show the DIV that does have the selected class. This way if you reclick the same link you won't have any flashing as you would if you simply hid all the DIVs then display the selected one.

  $('a').click( function() {
      var all = $('div.interface');
      var selected = $(this).attr('href');
      all.removeClass('selected');
      $(selected).addClass('selected');
      div.filter(':not(.selected)').hide();
      div.filter('.selected').show();
      return false;  // stop the link from being taken
 });

Answer 2

The easiest solution is to add manually the events for every element of the menu and then hidden or showing with "toggle" on wich you can add the same effects as with show hidde

$("#acer").click(function() { $("#acerca").toggle();} );
$("#cur").click(function() { $("#cursos").toggle();} );
...

Another solution, in this case you can add menu items without changing the jquery code, with the requisite that the anchor text must be the div id.

<a href="#acerca" class="anchorClass">acercade</a>
<div id="acercade"></div>

 $(".anchorClass").click(function(){ 
   $("#"+$(this).text()).toggle(); 
 });

Answer 3

A slightly different variation of the tvanfosson's idea.

$('a').click(
    function()
    {
        var selected = $(this).attr('href');
        //If user clicked on a link which is already displayed, do nothing.
        if($(selected).hasClass('selected'))
            return;

        //hide all the divs.
        $('div.interface')
            .hide()
            .removeClass('selected');

        //show the selected div.
        $(selected)
            .show()
            .addClass('selected');
   }
}

Answer 4

After drawing up some inspiration from your suggestions, I came up with this:

$('h3 a').click(
    function()
    {

     var checker = $(this).attr('href');

     if ($(checker).is(":visible"))

     {
     return false;
     }

     else {  

     $("#acerca").hide();
     $("#cursos").hide();
     $("#calendario").hide();
     $("#contacto").hide();
     $(checker).show();

        return false;


      }
   });

In this case:

1.-How would you automate the 'targetting' of the other divs so you don't name them individually? arrays?

Thanks anyway, I'll keep working on it.

Answer 5

I now went as far as adding an extra functionality/touch to the 'anchors menu' itself. The whole thing, JQuery wise, looks like this. Nevermind the silly variable names used for the example =) :

$(document).ready(function(){

$("#cursos,#calendario,#contacto").hide();
$("#ace").addClass('check');


$('h3 a').click(
    function()
    {

     var checker = $(this).attr('href');
     var anchorer = $(this);

     if ($(checker).is(":visible"))

     {
     return false;
     }

     else {  

     $("#acerca,#cursos,#calendario,#contacto").hide();
     $(checker).show();
     $("#ace,#cur,#cal,#con").removeClass('check');
     $(anchorer).addClass('check');

        return false;  // 


      }
   });


});

Answer 6

Great answers guys!!

i made some ajusments to get some animation while toggoling the divs...i used the the slide effect but it should work with any kind of animation

$('a').click( function() {
    var all = $('div.interfase');
    var selected = $(this).attr('href');
    if($(selected).hasClass('selected') || $(selected).is(":visible"))
     return false;
    else
    {
     all.removeClass('selected');
     $(selected).addClass('selected');
     $('div.interfase:visible').filter(':not(.selected)').hide('slide',
     function() {
     all.filter('.selected').show('slide');
     });
        return false;
    }
});

note: This code only works if you have a previously selected and visible div, because i am using the callback function inside hide() to activate the show() effect and get it nice and smooth...

hope it helps.... je