If This is Clicked Show This Else Hide This

Question

I have seen other if else examples on here but nothing specifically addressing jquery "if clicked show this else hide this". Here's a simple code example. I would like to know the cleanest way to show the .redStuff when #red is clicked else hide it and show the other classes when the relative id is clicked. Here is the HTML:

 .redStuff, .blueStuff, .greenStuff { display: none; } 

 <ul id="color"> <li id="red"><a href="#">Red</a></li> <li id="blue"><a href="#">Blue</a></li> <li id="green"><a href="#">Green</a></li> </ul> <div class="redStuff">Red Stuff</div> <div class="blueStuff">Blue Stuff</div> <div class="greenStuff">Green Stuff</div> 

Answer 1

Using data attributes is easy once you get the idea.

css

.redStuff, .blueStuff, .greenStuff {
  display: none;
 }

html

<ul id="color">
  <li id="red" data-color="red"><a href="#">Red</a></li>
  <li id="blue" data-color="blue"><a href="#">Blue</a></li>
  <li id="green" data-color="green"><a href="#">Green</a></li>
</ul>

<div class="redStuff" data-content="red">Red Stuff</div>
<div class="blueStuff" data-content="blue">Blue Stuff</div>
<div class="greenStuff" data-content="green">Green Stuff</div>

jquery

       // no need for the ids or classes
       // we set data attributes for the html
  $("li[data-color]").click(function(){
       // next line is for second click, to hide the prev div element
    $("div[data-content]").hide();
       // we are getting the data-color attr value here 
       // and for readibility  we assigned it to a variable called color
    var color = $(this).data("color");
       // find the div with the same content and show 
    $("div[data-content='"+color+"']").show();
  });

jsfiddle link to play with codes

Answer 2

Numerous ways to approach this depending on complexity of the layout.

If the order is the same relationship between the <li> 's and the <div> you can use index() . Adding a common class would be helpful

<div class="redStuff  stuff">Red Stuff</div>

JS

$('#color li').click(function(){
    // "this" is the element event occurred on
    var index = $(this).index();
    // hide all the "stuff" class and show the matching indexed one
    $('.stuff').hide().eq(index).show();

});

Or add data- attributes to target specific element so that index order becomes irrelevant

HTML

<li id="red"><a href="#" data-target=".redStuff">Red</a></li>

JS

$('#color a').click(function(){
   $('.stuff').hide().filter( $(this).data('target') ).show();
});

Or by using ID to create a selector

$('#color li').click(function(){
     $('.stuff').hide().filter('.' + this.id +'Stuff').show();
});

Answer 3

This should work.

It's not an "If Then Else" statement exactly, but it accomplishes the logical objective.

var $stuff = $(".redStuff, .blueStuff, .greenStuff");
var $colors = $("#color li a");
$colors.on("click", function(){
    // get color from parent (li) id
    var color = $(this).parent()[0].id;
    // turn all stuff off (because we don't know what came last)
    $stuff.attr({style: null});
    // turn on clicked stuff class
    $("." + color + "Stuff").attr({style: "display:block;"});
});

Demo is here .