Reputation: 18399
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
Reputation: 12206
Sounds like you want an accordion.
jQuery UI provides one: http://jqueryui.com/demos/accordion/
Upvotes: 1
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
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
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