A better solution for show/hide additional form info text.

This is based on the show/hide functionality already used in the
backend in various places with a nice no-js fallback.o

templates/2k11/admin/plugin_config_item.tpl

@@ -2,7 +2,7 @@
     <hr>
 {elseif $ctype == 'select'}
     <div class="clearfix form_select">
-        <label for="serendipity_{$config_item}">{$cname}{if $cdesc != ''} <span>{$cdesc}</span>{/if}</label>
+        <label for="serendipity_{$config_item}">{$cname}{if $cdesc != ''} <a class="toggle_info" href="#{$config_item}_info"><span class="icon-info-circled"></span><span class="visuallyhidden"> More</span></a>{/if}</label>
         {* Make sure id creation actually produces unique identifiers *}
         <select id="serendipity_{$config_item}" class="direction_{$lang_direction}" name="serendipity[{$postKey}][{$config_item}]{($is_multi_select) ? '[]' : ''}" {($is_multi_select) ? 'multiple' : ''} {($is_multi_select && ($select_size > 0)) ? "size='{$select_size}'" : ''}>
         {foreach $select AS $select_value => $select_desc}
@@ -10,11 +10,12 @@
             <!-- case select assign id={$id} -->
             <option value="{$select_value}" {(in_array($select_value, $selected_options) || in_array($select_value, $pre_selected)) ? 'selected' : ''} title="{$select_desc|escape}">{$select_desc|escape}</option>
         {/foreach}
-        </select>            
+        </select>
+        {if $cdesc != ''}<span id="{$config_item}_info" class="field_info additional_info">{$cdesc}</span>{/if}
     </div>
 {elseif $ctype == 'radio'}
     <fieldset>
-        <legend><span>{$cname}{if $cdesc != ''} <span>{$cdesc}</span>{/if}</span></legend>
+        <legend><span>{$cname}{if $cdesc != ''} <a class="toggle_info" href="#{$config_item}_info"><span class="icon-info-circled"></span><span class="visuallyhidden"> More</span></a>{/if}</span></legend>
         <div class="clearfix grouped">
         {foreach $radio_button AS $r}
             <div class="form_radio">
@@ -24,18 +25,21 @@
             </div>
         {/foreach}
         </div>
+        {if $cdesc != ''}<span id="{$config_item}_info" class="field_info additional_info">{$cdesc}</span>{/if}
     </fieldset>
 {elseif $ctype == 'string'}
     <div class="clearfix form_field">
-        <label for="serendipity_{$config_item}">{$cname}{if $cdesc != ''} <span>{$cdesc}</span>{/if}</label>
+        <label for="serendipity_{$config_item}">{$cname}{if $cdesc != ''} <a class="toggle_info" href="#{$config_item}_info"><span class="icon-info-circled"></span><span class="visuallyhidden"> More</span></a>{/if}</label>
         {* TODO: Make sure id creation actually produces unique identifiers *}
         <input id="serendipity_{$config_item}" class="direction_{$lang_direction}" name="serendipity[{$postKey}][{$config_item}]" type="{$input_type}" value="{$hvalue}">
+        {if $cdesc != ''}<span id="{$config_item}_info" class="field_info additional_info">{$cdesc}</span>{/if}
     </div>
 {elseif (($ctype == 'html') || ($ctype == 'text'))}
     <div class="clearfix form_area">
-        <label for="nuggets{$elcount}">{$cname}{if $cdesc != ''} <span>{$cdesc}</span>{/if}</label>
+        <label for="nuggets{$elcount}">{$cname}{if $cdesc != ''} <a class="toggle_info" href="#nuggets{$elcount}_info"><span class="icon-info-circled"></span><span class="visuallyhidden"> More</span></a>{/if}</label>
 
         <textarea id="nuggets{$elcount}" class="direction_{$lang_direction}" name="serendipity[{$postKey}][{$config_item}]" rows="{$text_rows}">{$hvalue}</textarea>
+        {if $cdesc != ''}<span id="nuggets{$elcount}_info" class="field_info additional_info">{$cdesc}</span>{/if}
     </div>
 {elseif $ctype == 'content'}
     <div class="clearfix">
@@ -52,18 +56,19 @@
     </div>
 {elseif $ctype == 'media'}
     <div class="clearfix form_field media_choose">
-        <label for="serendipity[{$postKey}][{$config_item}]">{$cname}{if $cdesc != ''} <span>{$cdesc}</span>{/if}</label>
+        <label for="serendipity[{$postKey}][{$config_item}]">{$cname}{if $cdesc != ''} <a class="toggle_info" href="#{$postKey}_{$config_item}_info"><span class="icon-info-circled"></span><span class="visuallyhidden"> More</span></a>{/if}</label>
         
         <input id="serendipity[{$postKey}][{$config_item}]" class="change_preview" name="serendipity[{$postKey}][{$config_item}]" type="text" data-configitem="{$config_item}" data-pmwidth="{$preview_width}" data-pmheight="{$preview_height}" value="{$value}">{* This should be input[type=file] … *}
 
         <a class="button_link choose_media" href="#serendipity[{$postKey}][{$config_item}]" title="{$CONST.MEDIA_LIBRARY}"><span class="icon-picture"></span><span class="visuallyhidden"> {$CONST.MEDIA_LIBRARY}</span></a>
+        {if $cdesc != ''}<span id="{$postKey}_{$config_item}_info" class="field_info additional_info">{$cdesc}</span>{/if}
     </div>
 {elseif $ctype == 'sequence'}
     {if !$sequencejs_output}
     <script src="{serendipity_getFile file="admin/js/dragdrop.js"}"></script>
     {/if}
     <fieldset>
-        <legend><span>{$cname}{if $cdesc != ''} <span>{$cdesc}</span>{/if}</span></legend>
+        <legend><span>{$cname}{if $cdesc != ''} <a class="toggle_info" href="#{$config_item}_info"><span class="icon-info-circled"></span><span class="visuallyhidden"> More</span></a>{/if}</span></legend>
         <input id="{$config_item}_value" name="serendipity[{$postKey}][{$config_item}]" type="hidden" value="{$value}">
 
         <noscript>
@@ -107,6 +112,7 @@
     {if isset($no_sequence)}
         {$no_sequence}
     {/if}
+        {if $cdesc != ''}<span id="{$config_item}_info" class="field_info additional_info">{$cdesc}</span>{/if}
     </fieldset>
     <script>
         function sort_{$config_item}_Sequence() {