ansaurus

Question

Answer 1

+1 A:

Given the format your given I'd do something like the following, assign each link with an id that can understandably refer to it's associated div (like "link_1" for "option_1") and use the following jQuery:

$('a#link_1').click(function() {
     $(this).attr("class", "selected");
     $(this).siblings('a').removeClass("selected");
     $('div#option_1').show();
     $('div#option_1').siblings('div').hide();
});
    $('a#link_2').click(function() {
     $(this).attr("class", "selected");
     $(this).siblings('a').removeClass("selected");
     $('div#option_2').show();
     $('div#option_2').siblings('div').hide();
});
    $('a#link_3').click(function() {
     $(this).attr("class", "selected");
     $(this).siblings('a').removeClass("selected");
     $('div#option_3').show();
     $('div#option_3').siblings('div').hide();
});

I haven't done jQuery for a little while, but that should be right :)

Wayne Austin 2008-10-24 15:23:36

Not working but I'm not sure why, damn Java and it's lack of showing errors. Looking at the code it seems to make sense (even though I have only very recentley started exploring jQuery)...

zuk1 2008-10-24 15:39:58

Answer 2

+8 A:

Hi Zuki

First of all give your links a class or Id (I've used a class), which will make it easier to do the swap in

<div id="options_1" class="tab" >option 1</div>
<div id="options_2" class="tab">option 2</div>
<div id="options_3" class="tab">option 3</div>

$(document).ready(function () {

    var clickHandler = function (link) {
         $('.tab').hide();
         $('#option_' + link.data.id).show();
         $('.selected').removeClass('selected');
         $(this).attr('class','selected');
   }

   $('.link1').bind('click', {id:'1'} ,clickHandler);
   $('.link2').bind('click', {id:'2'} ,clickHandler);
   $('.link3').bind('click', {id:'3'} ,clickHandler);
})

Matt Goddard 2008-10-24 15:26:56

I thank you indefinately, after weeding out the spelling mistakes in your code it worked perfectly!

zuk1 2008-10-24 15:48:44

fantastic - glad i could help :)

Matt Goddard 2008-10-24 15:49:42

If you're using multiple classes per element, $(this).attr('class','selected') is too clumsy as it removes all other classes except 'selected'. Instead, use $(this).addClass('selected') and all other classes will remain in place.

markedup 2010-04-23 10:25:03

Answer 3

A:

You can help yourself if you add IDs to your links in form 'options_1_select' and a class 'opener'. Then you can assign a single event handler to all of your links:

$('a.opener').click(function() {
  // mark current link as selected and unmark all others
  $(this)
    .addClass('selected')
    .siblings('a').removeClass('selected');

  // find a div to show, and hide its siblings
  $('#' + $(this).attr('id').substring(0, 9))
    .show()
    .siblings('div').hide();
});

Damir Zekić 2008-10-24 15:32:25

Answer 4

A:

Sounds like you want an accordion.

jQuery UI provides one: http://jqueryui.com/demos/accordion/

ajma 2010-04-04 04:02:20

ansaurus

tags:

views:

answers:

jQuery Swapping Elements

related questions