After searching extensively without success, I decided to register and ask my first question here. Hopefully, someone can provide a solution:
My goal is to create a set of five buttons (divs) with onClick events that will show five different divs. I've managed to make it work using inline code for each button, but I'm looking to streamline this by creating an external function that simply sets the clicked div (which will display a yellow border) and the div that should be shown.
The structure of the code I'm attempting to write is as follows:
HTML:
<div id="button1" class="button" onClick="choose(this,'c1')"></div>
<div id="button2" class="button" onClick="choose(this,'c2')"></div>
<div id="button3" class="button" onClick="choose(this,'c3')"></div>
<div id="button4" class="button" onClick="choose(this,'c4')"></div>
<div id="button5" class="button" onClick="choose(this,'c5')"></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
<div class="c5"></div>
JAVASCRIPT-JQUERY:
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();
}
The part where the border color changes upon clicking works well, but I'm struggling to figure out how to dynamically pass the class name of the div that should be displayed into the jQuery function, which should be one of c1, c2, c3, c4, or c5. Can anyone provide assistance with this?
A big thanks to @Roko C. Buljan for providing the best overall solution http://jsbin.com/UXElode/4/edit