8

I need to be able to show and hide divs based on which href class is 'selected' I have some code below:

http://jsfiddle.net/XwN2L/722/

I need to remove the 'all' option in the fiddle above.

So basically when a href has the class of selected the two links for the href are shown, then when a user clicks on another href, it hides the previous links and shows the new links with the class 'selected'

When they click on the link the selected class changes and the buttons hide and show accordingly?

Nearly there just need help on the last bits.

<div class="buttons">
 <a id="showall">All</a>
 <a class="showSingle" target="1">Div 1</a>
 <a class="showSingle selected" target="2">Div 2</a>
 <a class="showSingle" target="3">Div 3</a>
 <a class="showSingle" target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv">
 <a href="#" class="button3">1a</a>
 <a href="#" class="button3">1b</a>
</div>

<div id="div2" class="targetDiv">
 <a href="#" class="button3">2a</a>
 <a href="#" class="button3">2b</a>
</div>

<div id="div3" class="targetDiv">
  <a href="#" class="button3">3a</a>
  <a href="#" class="button3">3b</a>
</div>

<div id="div4" class="targetDiv">popup COMPLETE</div>

<script>
 jQuery(function(){
    jQuery('.showSingle').click(function(){
          jQuery('.targetDiv').hide();
          jQuery('#div'+$(this).attr('target')).show();
     });
 });​
<script>

Cheers

agriboz
  • 4,724
  • 4
  • 35
  • 49
John
  • 1,777
  • 9
  • 42
  • 66

1 Answers1

4

You can use data-* attributes:

<div class="buttons">
  <a  id="showall" data-target="all" >All</a>
  <a  class="showSingle" data-target="1">Div 1</a>
  <a  class="showSingle selected" data-target="2">Div 2</a>
  <a  class="showSingle" data-target="3">Div 3</a>
  <a  class="showSingle" data-target="4">Div 4</a>
</div>


var $target = $('.targetDiv'); // caching object for better performance

$('.buttons a').click(function(e) {
    e.preventDefault();
    $(this).addClass('selected').siblings().removeClass('selected');
    var target = $(this).data('target');
    if (target === 'all') {
        $target.show();
    } else {
        $target.hide().filter('#div' + target).show();
    }
});

http://jsfiddle.net/fKHsB/

Ram
  • 143,282
  • 16
  • 168
  • 197
  • is it possible to get rid of the 'All' option? lookin good though mate cheers – John Oct 30 '12 at 13:35
  • 1
    @John Why, is 'all' ugly? `:)` – Ram Oct 30 '12 at 13:37
  • lol just dont need the display of all the links at once if that makes sense - in the 'results' area. just need div 1-4 – John Oct 30 '12 at 13:39
  • @John If you want to filter the first 4 div elements, you can use `filter` method and `:lt` selector, replace `$target.show();` with `$target.filter(':lt(4)');` – Ram Oct 30 '12 at 13:41
  • @John Sorry John it seems that I have misunderstood your question, you want to remove the `all` anchor link? Can you rephrase your question? please. Doesn't your current code do this? – Ram Oct 30 '12 at 13:51
  • Sorry, in the 'results' area in the fiddle i just want it to be "Div 1 , Div 2, Div 3, Div 4" I dont need the All. So when you first load the page, I need it so 'All' is removed, just so i can toggle between Div 1 Div 2 Div 3 Div 4, and the one with the 'selected' class is visible first. Sorry if I didnt make sense – John Oct 30 '12 at 13:53
  • yeah awesome mate, just the selected red class not changing, but i can try to figure that out. thanks – John Oct 30 '12 at 14:04
  • @John You are welcome, yes, I have updated the fiddle http://jsfiddle.net/B4SsV/ – Ram Oct 30 '12 at 14:07