Show/Hide Only Chosen DIV

Use JQuery to show the contents only of the DIV chosen from a list.

by Matthew Schenker

HTML

<div class="choice_container"> <a id="choice1">Choice A</a>
 <a id="choice2">Choice B</a>
 <a id="choice3">Choice C</a>
 <a id="choice4">Choice D</a>
</div>
<div class="wrap">
    <div class="choice1" style="display:none">You Chose A!</div>
    <div class="choice2" style="display:none">You Chose B!</div>
    <div class="choice3" style="display:none">You Chose C!</div>
    <div class="choice4" style="display:none">You Chose D!</div>
</div>
<div class="other-content">
<p>
This is some other content, which appears below 
</p>
</div>

CSS

.choice_container {
    width: 360px;
    height: 50px;
    background-color: #ACDEE0;
    border-radius: 10px;
    padding: 30px 0 0 10px;
}
#choice1, #choice2, #choice3, #choice4 {
    width: 75px;
    padding: 10px;
    border: 2px solid #998675;
    background-color: #fff;
}
.choice_container a {
    cursor: pointer;
	border-radius: 10px 10px 0 0;
}

JavaScript

$('[id^="choice"]').on('click', function (e) {
    e.preventDefault();
    $('.wrap > div').hide();

    $('.' + this.id).show();
});