More efficient way to combine click trigger elements
HTML
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<ul class="sections">
<li id="red">Section Red</li>
<li id="green">Section Green</li>
<li id="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
$(document).ready(function(){
$( "#accordion" ).accordion();
$(".sections>li").click(function () {
var index=$(this).index();
$('.faqfield-question.accordion').eq(index).click();
});
});