More efficient way to combine click trigger elements

by DannyEnglander

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<ul>
    <li id="red" data-trigger-id="#section-red">Section Red</li>
    <li id="green" data-trigger-id="#section-green">Section Green</li>
    <li id="blue" data-trigger-id="#section-blue">Section Blue</li>
</ul>

<div id="accordion">
    <h2 class="faqfield-question accordion" id="section-red">Section Red</h2>
    <p>Red content</p>

    <h2 class="faqfield-question accordion" id="section-green">Section Green</h2>
    <p>Green content</p>

    <h2 class="faqfield-question accordion" id="section-blue">Section Blue</h2>
    <p>Blue content</p>
</div>

CSS

ul {
    background: #667;
    padding: 10px;
    color: #fff
}

li {  
list-style: none;
display: inline;
padding: 10px;
}

JavaScript

$("#accordion" ).accordion();

 $("#red, #green, #blue").bind("click", (function () {
    var triggerID = $(this).data("trigger-id");
    $(triggerID).trigger("click");
 }));