1

Regarding to post: If Radio Button is Selected Show Div - 8 Radio Buttons / 8 Divs - Can this be simplified?

and best answer by "Rory McCrossan"

I tried to create html file "test.html" which contains:

  <style type="text/css">
    .content {display: none}
  </style>

  <script type="text/javascript">
  $('.trigger').click(function() {
      $('.content').hide();
      $('.' + $(this).data('rel')).show();
  });
  </script>

  <form id='group'>
      <label>
          <input type="radio" name="group1" class="sim-micro-btn trigger" data-rel="sim-micro-desktop" />
      </label>
      <label>
          <input type="radio" name="group1" class="sim-mini-btn trigger" data-rel="sim-mini-desktop" />
      </label>
      <label>
          <input type="radio" name="group1" class="sim-maxi-btn trigger" data-rel="sim-maxi-desktop" />
      </label>
      <label>
          <input type="radio" name="group1" class="sim-mega-btn trigger" data-rel="sim-mega-desktop" />
      </label>
  </form>
  <div class="billpay-internet-add-ons">
      <div class="sim-micro-desktop content">sim-micro</div>
      <div class="sim-mini-desktop content">sim-mini</div>
      <div class="sim-maxi-desktop content">sim-maxi</div>
      <div class="sim-mega-desktop content">sim-mega</div>
</div>

And I can see radio buttons but when I choose any then notthing happes. Any idea?

Community
  • 1
  • 1
maniootek
  • 409
  • 1
  • 8
  • 15
  • 2
    It works for me: http://jsfiddle.net/mLkGU/ – GluePear Nov 10 '13 at 19:24
  • Seems to work fine: [See Fiddle](http://jsfiddle.net/Y67Yk/) – Nope Nov 10 '13 at 19:25
  • Yes, it works with Fiddle but when I try local it doesn't – maniootek Nov 10 '13 at 19:25
  • Are you importing jQuery? – span Nov 10 '13 at 19:25
  • Works for me. Are you loading jQuery? – R.J. Nov 10 '13 at 19:25
  • Guys just try do it locally on your computer and tell me if it works for you. – maniootek Nov 10 '13 at 19:26
  • Sorry guys but how can I load jQuery? I thought it is javascript and it's enought to put this code between – maniootek Nov 10 '13 at 19:27
  • I think I know your problem. First you should upload your test.html to local server (I personally use Wamp server), second you need to include this in of your page. Just remember, in order to import jQuery to your page, you should open it from the server, not just static html file – Maxim Ershov Nov 10 '13 at 19:30
  • jQuery is not javascript. You need to actually define it. You can use CDN's for this: `//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js`, so would look like this: `` – Solomon Closson Nov 10 '13 at 19:31
  • I just added this line on top of my file and it still doesn't work. What am I doing wrong? – maniootek Nov 10 '13 at 19:37
  • Here is a fiddle with out the use of javascript, just css. http://jsfiddle.net/Josh_Powell/UbF9a/ – Josh Powell Nov 10 '13 at 20:04
  • @maniootek Your source worked for me locally, but only if I moved the piece of Javascript to the end of the body. The way you'd written it, it was executed before the radio buttons were created in the DOM. – Mr Lister Nov 11 '13 at 11:44
  • Make sure you have jQuery loaded and put your `.click()` event handler within `$(document).ready()` to ensure the DOM has fully loaded before you start running scripts. – Adam Botley Nov 11 '13 at 17:02

0 Answers0