Selected

This plugin makes it easy for you to dynamically select the states of form elements and CSS objects at page load time. You pass the value you're evaluating in the item parameter. That will always be some sort of variable, like a segment. Then you use a variable to handle the output of the selected state.

Parameters
Variables
Examples

Parameters

<ul id="nav"> {exp:selected item="{segment_1}" replace="class='selected'"} <li id="nav1" class="first"><a href="/"{selected_null}>Home</a></li> <li id="nav2"><a href="/topics"{selected_topics}>Topics</a></li> <li id="nav3"><a href="/news"{selected_news}>Daily News</a></li> <li id="nav5"><a href="/archives"{selected_archives}>Archives</a></li> <li id="nav7"><a href="/subscribe"{selected_subscribe}>Subscribe</a></li> <li id="nav8"><a href="/advertisers"{selected_advertisers}>Advertisers</a></li> {/exp:selected} </ul>

item
replace

item

item="{segment_1}"

The 'item' parameter will select the value to evaluate. This should always be a variable, like a segment.

replace

replace="class='selected'"

The 'replace' parameter holds the output which will replace the appropriate variable.

selected_null

{selected_null}

The 'selected_null' variable allows you to select a default selected state.

selected_yourcode

{selected_yourcode}

The 'selected_yourcode' variable allows you to associate an item in your code (e.g., a list item or select option) with the value of the 'item' parameter. When you use this variable, replace 'yourcode' with the possible values for the 'item' parameter.
When the value of the 'item' parameter is equivalent to the term you've used in this variable, the variable will be replaced by the value you've set in the 'replace' parameter.

{selected_topics} {selected_about} {selected_articles}

Examples

In the navigation list below, segment 1 is being evaluated.

If segment 1 is ‘topics’, the {selected_topics} variable will be replaced by class="selected". The other variables will be replaced by an empty string.
If segment 1 is ‘news’, the {selected_news} variable will be replaced by class="selected". The other variables will be replaced by an empty string.
If segment 1 is null, the {selected_null} variable will be replaced by class="selected". The other variables will be replaced by an empty string.
If segment 1 is ‘orange’, all the variables will be replaced by an empty string.




<ul id="nav">


{exp:selected item="{segment_1}" replace="class=’selected‘“}


	<li id="nav1" class="first"><a href="/"{selected_null}>Home</a></li>


	<li id="nav2"><a href="/topics"{selected_topics}>Topics</a></li>


	<li id="nav3"><a href="/news"{selected_news}>Daily News</a></li>


	<li id="nav5"><a href="/archives"{selected_archives}>Archives</a></li>


	<li id="nav7"><a href="/subscribe"{selected_subscribe}>Subscribe</a></li>


	<li id="nav8"><a href="/advertisers"{selected_advertisers}>Advertisers</a></li>


	{/exp:selected}


</ul> <!-- nav -->

The resulting output when segment 1 is ‘topics’ would be this:




<ul id="nav">


	<li id="nav1" class="first"><a href="/">Home</a></li>


	<li id="nav2"><a href="/topics" class="selected">Topics</a></li>


	<li id="nav3"><a href="/news">Daily News</a></li>


	<li id="nav5"><a href="/archives">Archives</a></li>


	<li id="nav7"><a href="/subscribe">Subscribe</a></li>


	<li id="nav8"><a href="/advertisers">Advertisers</a></li>


</ul> <!-- nav -->