4.5.3 #permalink Triangle Selector
By default the triangle is positioned in the middle (but use the _noPosition variation to have it disappear completely until something is selected). If you want to select one of a set of horizontal elements, give the triangle class js-selectorN and the selected element js-selectorN-target, for some value of N unique on the page. A javascript function (gg.selectors.positionSelectors()) will take care of positioning the triangle. You don't need to explicitly call it as below, since it's part of the load and resize functions as defined in deferred.js.
Example
option 1
option 2
option 3
option 4
Markup
<div class="triangle-parent barSpacer triangle_ggPrimary1">
<div class="triangle triangle_bottom js-selector1"></div>
</div>
<div class="grid-parent layout_center">
<div class="grid-3 box_padded2" onclick="selectFunctionForTheStyleguideOnly(this)">option 1</div>
<div class="grid-3 box_padded2" onclick="selectFunctionForTheStyleguideOnly(this)">option 2</div>
<div class="grid-3 box_padded2" onclick="selectFunctionForTheStyleguideOnly(this)">option 3</div>
<div class="grid-3 box_padded2" onclick="selectFunctionForTheStyleguideOnly(this)">option 4</div>
</div>
<script type="text/javascript">
function selectFunctionForTheStyleguideOnly(elt){
$(elt).siblings().each(function(){$(this).removeClass('js-selector1-target');});
$(elt).addClass('js-selector1-target');
gg.selectors.positionSelectors();
}
</script>
Source:
modules/04_small_decorations/triangleSelector.less, line 250