Answers.Body: <p>I'm not sure I totally get what you're trying to do, but if you want to cut down a bit of the code duplication in here a good start would be to use a <a href="http://twig.sensiolabs.org/doc/2.x/tags/macro.html" rel="nofollow noreferrer">Twig macro</a>.</p>
  
  <p>So you'd set up your macro like this:</p>
  
  <pre><code>{% macro input(cssClass) %}
      &lt;a class=”{{ cssClass }}” href="#"&gt;Viewer&lt;/a&gt;
      &lt;a class=”{{ cssClass }}” href="#"&gt;Photo&lt;/a&gt;
      &lt;a class=”{{ cssClass }}” href="#"&gt;Video&lt;/a&gt;
  {% endmacro %}
  
  {% from _self import input %}
  </code></pre>
  
  <p>Then you'd call it like this:</p>
  
  <pre><code>{{ input('dual') }}
  </code></pre>
  
  <p>If you don't need the value of the radio buttons for anything else, you could always give them the value of your CSS class; that way you don't need to convert them from one thing to another. If you did it this way then you could just call your macro like this:</p>
  
  <pre><code>{% set cssClass = entry.viewerOption %}
  {{ input(cssClass) }}
  </code></pre>
  
  <p>Make sure you've set a default option for your radio button when you've added it in the Control Panel.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-13T13:27:11.397Z
Answers.LastActivityDate: 2017-03-14T08:55:39.743Z
Answers.LastEditDate: 2017-03-14T08:55:39.743Z
Answers.UserDisplayName: Steve Holland
Body: <p>The issue arises from inline three buttons (Viewer, Video, Photo) via CSS.</p>
  
  <p>The idea was to make the buttons more responsive for example if I want to display just one button than stretch to 100% width within the parent. Two buttons (50% each) and three buttons (33.33% each).</p>
  
  <p>I guess if I setup radio field and the values are <code>displayOne</code>, <code>displayTwo</code> and <code>displayThree</code>. </p>
  
  <pre><code>{% for option in entry.viewerOption %}
  
  {% if option in entry.viewerOption.value.selected(displayOne) %}
  &lt;a class=”single” href="#"&gt;Viewer&lt;/a&gt;
  {% else %}
  &lt;a class=”single” href="#"&gt;Photo&lt;/a&gt;
  {% else %}
  &lt;a class=”single” href="#"&gt;Video&lt;/a&gt;
  {% endif %}
  
  {% else %}
  
  {% if option in entry.viewerOption.value.selected(displayTwo) %}
  &lt;a class=”duel” href="#"&gt;Viewer&lt;/a&gt;
  &lt;a class=”duel” href="#"&gt;Photo&lt;/a&gt;
  &lt;a class=”duel” href="#"&gt;Video&lt;/a&gt;
  {% endif %}
  
  {% else %}
  
  {% if option in entry.viewerOption.value.selected(displayThree) %}
  &lt;a class=”triple” href="#"&gt;Viewer&lt;/a&gt;
  &lt;a class=”triple” href="#"&gt;Photo&lt;/a&gt;
  &lt;a class=”triple” href="#"&gt;Video&lt;/a&gt;
  {% endif %}
  {% endfor %}
  </code></pre>
  
  <p>I am not sure what is the best method to dynamically single, duel or triple buttons base on selected radio value.</p>
  
Tags: <templating><field>
Title: Display selected radio's value
ThreadText: # Display selected radio's value
  
  (Asked by: username_0 on 2017-03-13)
  
  The issue arises from inline three buttons (Viewer, Video, Photo) via CSS.
  
  The idea was to make the buttons more responsive for example if I want to display just one button than stretch to 100% width within the parent. Two buttons (50% each) and three buttons (33.33% each).
  
  I guess if I setup radio field and the values are `displayOne`, `displayTwo` and `displayThree`.
  
  ```
  {% for option in entry.viewerOption %}
  
  {% if option in entry.viewerOption.value.selected(displayOne) %}
  <a class=”single” href="#">Viewer</a>
  {% else %}
  <a class=”single” href="#">Photo</a>
  {% else %}
  <a class=”single” href="#">Video</a>
  {% endif %}
  
  {% else %}
  
  {% if option in entry.viewerOption.value.selected(displayTwo) %}
  <a class=”duel” href="#">Viewer</a>
  <a class=”duel” href="#">Photo</a>
  <a class=”duel” href="#">Video</a>
  {% endif %}
  
  {% else %}
  
  {% if option in entry.viewerOption.value.selected(displayThree) %}
  <a class=”triple” href="#">Viewer</a>
  <a class=”triple” href="#">Photo</a>
  <a class=”triple” href="#">Video</a>
  {% endif %}
  {% endfor %}
  
  ```
  
  I am not sure what is the best method to dynamically single, duel or triple buttons base on selected radio value.
  
  **Tags:** templating, field
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2017-03-13. Score: 1 | Accepted answer
  
  I'm not sure I totally get what you're trying to do, but if you want to cut down a bit of the code duplication in here a good start would be to use a [Twig macro](http://twig.sensiolabs.org/doc/2.x/tags/macro.html).
  
  So you'd set up your macro like this:
  
  ```
  {% macro input(cssClass) %}
      <a class=”{{ cssClass }}” href="#">Viewer</a>
      <a class=”{{ cssClass }}” href="#">Photo</a>
      <a class=”{{ cssClass }}” href="#">Video</a>
  {% endmacro %}
  
  {% from _self import input %}
  
  ```
  
  Then you'd call it like this:
  
  ```
  {{ input('dual') }}
  
  ```
  
  If you don't need the value of the radio buttons for anything else, you could always give them the value of your CSS class; that way you don't need to convert them from one thing to another. If you did it this way then you could just call your macro like this:
  
  ```
  {% set cssClass = entry.viewerOption %}
  {{ input(cssClass) }}
  
  ```
  
  Make sure you've set a default option for your radio button when you've added it in the Control Panel.
  
  
  ---
  
  