Recently, I came across a fantastic segmented control on and I am looking to customize it to fit my requirements.
However, I encountered an issue where adding multiple controls to the page only affects the first segmented control. Instead of duplicating the CSS and naming multiple times, I was wondering if there is another way to solve this problem, perhaps by utilizing jQuery?
For reference, here is the code in a JSFiddle: http://jsfiddle.net/kyV5U/
For example:
<ul class="segmented-control">
<li id="any"><a href="#any">Any</a></li>
<li id="all"><a href="#all">All</a></li>
</ul>
<div style="clear:both;"></div>
<ul class="segmented-control">
<li id="any"><a href="#any">Any 2</a></li>
<li id="all"><a href="#all">All 2</a></li>
</ul>
<div style="clear:both;"></div>
Thank you in advance for any help!