title: Use side by side buttons instead of drop down
body: <p>is it possible to replace a dropdown menu with three options to three side by side buttons? I've looked around online and can't seem to find anything similar.</p>
  
  <p>below is my current setup.</p>
  
  <p><a href="https://i.stack.imgur.com/doCYB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/doCYB.png" alt="enter image description here"></a></p>
  
  <p>This is what i want to replace the dropdown menu with. (bootstrap button group)</p>
  
  <p><a href="https://i.stack.imgur.com/YRu2o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YRu2o.png" alt="enter image description here"></a></p>
  
  <p>This is the current dropdown code.</p>
  
  <pre><code>  &lt;div class="dropdown"&gt;
  
      &lt;select id="selectMe"&gt;
          &lt;option value="iPhone"&gt;iPhone&lt;/option&gt;
          &lt;option value="iPad"&gt;iPad&lt;/option&gt;
          &lt;option value="Samsung"&gt;Samsung&lt;/option&gt;
      &lt;/select&gt;
  
  
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Any help will be greatly appreciated. Josh.</p>
  
  <p>The option is then passed on to a piece of java script this is where i'm having trouble simply switching the two.                                                                                                                 </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $(document).ready(function () {
  $('.group').hide();
  $('#iPhone').show();
  $('#selectMe').change(function () {
  $('.group').hide();
  $('#'+$(this).val()).show();
  })
  });
  
  
  &lt;/script&gt;
  </code></pre>