title: onClick event + jquery to modify a class css style in a different div
body: <p>I have been looking around for a while, but i couldn't find a proper solution, so I registered and this is the first question i'm posting. I hope you can help me:</p>
  
  <p>I'm trying to create a set of five buttons (divs) with onClick event that show five diferent divs. I have created an inline code for each button and it works, but im trying to create an external function to perform the task just setting the div clicked (that will display a yellow border) and the div that should be displayed.</p>
  
  <p>A scheme of the code im trying to write is:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="button1" class="button" onClick="choose(this,'c1')"&gt;&lt;/div&gt;
  &lt;div id="button2" class="button" onClick="choose(this,'c2')"&gt;&lt;/div&gt;
  &lt;div id="button3" class="button" onClick="choose(this,'c3')"&gt;&lt;/div&gt;
  &lt;div id="button4" class="button" onClick="choose(this,'c4')"&gt;&lt;/div&gt;
  &lt;div id="button5" class="button" onClick="choose(this,'c5')"&gt;&lt;/div&gt;
  &lt;div class="c1"&gt;&lt;/div&gt;
  &lt;div class="c2"&gt;&lt;/div&gt;
  &lt;div class="c3"&gt;&lt;/div&gt;
  &lt;div class="c4"&gt;&lt;/div&gt;
  &lt;div class="c5"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JAVASCRIPT-JQUERY:</p>
  
  <pre><code>function choose(button,card) {
  $( "#button1" ).css("border-color", "#F1F1F1");
  $( "#button2" ).css("border-color", "#F1F1F1");
  $( "#button3" ).css("border-color", "#F1F1F1");
  $( "#button4" ).css("border-color", "#F1F1F1");
  $( "#button5" ).css("border-color", "#F1F1F1");
  $( "div.c1" ).hide();
  $( "div.c2" ).hide();
  $( "div.c3" ).hide();
  $( "div.c4" ).hide();
  $( "div.c5" ).hide();
  $( button ).css("border-color", "#FFCC00");
  $( div.card ).show();
  }
  </code></pre>
  
  <p>The border (selector) task works fine and changes the border color of the div clicked, but I cant find a way to take the class name that should be shown into the jquery function, it should be one of the c1, c2, c3, c4 or c5. Can someone help me with this?</p>
  
  <p>Best overall solution <a href="http://jsbin.com/UXElode/4/edit" rel="nofollow">http://jsbin.com/UXElode/4/edit</a> thanks to @Roko C. Buljan</p>