CODEWITHSUNDEEP
jquery
zuk1
zuk1

Reputation: 18399

jQuery Swapping Elements

Ok let me make an example:

<head>
<script type="text/javascript">
$(document).ready(function(){

    $("#options_2").hide();
    $("#options_3").hide();

});
</script>
</head>
<body>
<div id="options_1">option 1</div>
<div id="options_2">option 2</div>
<div id="options_3">option 3</div>
<a href="" class="selected">choose option 1</a>
<a href="">choose option 2</a>
<a href="">choose option 3</a>
</body>

As you can see only option 1 is visible by default, and the link you click to show option 1 has the class="selected" by default, showing the user that that option is currently selected. I basically want it so that when they click "choose option 2" the options 1 div hides itself and the options 2 div shows itself, and then gives the second link the selected class and removes the class from the image link.

It basically just tabs using links and divs but due to the format I have to display it in I cannot use any of the tabs plugins I have found online.

Upvotes: 5

Views: 18976

Answers (4)

ajma
ajma

Reputation: 12206

Sounds like you want an accordion.

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

Upvotes: 1

Matt Goddard
Matt Goddard

Reputation: 909

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);
})

Upvotes: 12

Damir Zekić
Damir Zekić

Reputation: 15950

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();
});

Upvotes: 1

Wayne Austin
Wayne Austin

Reputation: 2989

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 :)

Upvotes: 2

Related Questions