boostrap: radio button with a "add new" option to display/hide some fields

Question

I am displaying a list of options with radio buttons. I would like one of them to be a "Add new" option so when it is selected, a div that contains all the fields to add this new option should appear.

How can I do that using Bootstrap? Is using JavaScript the only way? What if JS is disabled or there is a problem in loading, then the "new" area will never be available?

<div class="radio text-left">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option 1
  </label>
</div>
<div class="radio text-left">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Add a new one
  </label>
</div>

<div class="row new">
<!-- The fields to add a new option should appear here when the "Add" option is selected... -->
</div>

Thanks

Answer 1

There isn't a default bootstrap way to do this. Granted if there were, it would still be javascript

Look at the .change function in jquery to listen to the radio button selection. When the value of the selection equals add new you'll trigger the display of your div. https://api.jquery.com/on/

$('document').ready(function() {
    $('input[type=radio]').change(function() {
        if($(this).val() == 'option2') {
            $('.row').fadeIn(); 
        }
        else{
           $('.row').fadeOut();
        }
    })
});

View the codepen

Answer 2

No-JS solution

Link to jsFiddle

If you really need to support this without javascript, you could use the checkbox hack, which uses a CSS :checked selector and a general sibling selector (~) to target the extra div.

input#optionsRadios2:checked ~ .new {
  display: block;
}

However, I'm not sure how many browsers that don't do javascript would be able to handle this CSS3 (as far as I can tell, support is IE8+). I also changed the markup a bit.

---

Suggested solution

Link to jsFiddle

If you can live with a JS solution, I think it could actually have wider support than the CSS solution above, since it relies on selectors that not all browsers will support.

First, I've wrapped everything in a div to make selecting easier:

<div class="radioFields">
    ...
</div>

Then add this jQuery inside your document.ready function:

    $('.radioFields input[type=radio]').on('change', function(){
        var addNew = $('#optionsRadios2:checked').length;

        if( addNew ) {
            $('.radioFields').addClass('showNew');
        } else {
            $('.radioFields').removeClass('showNew');
        }
    });

By only adding and removing CSS classes in your markup, you give yourself a lot of flexibility on how to display things. You can even make it fade in and out. Here's my CSS:

.new {
    opacity: 0;
    transition: all 0.3s ease;
}

.showNew .new {
    opacity: 1;
}

---

A final idea

Link to jsFiddle

If you've absolutely got to have a bulletproof no-JS solution, you might consider having the .new fields visible by default, then hidden by javascript, and then revealed again only when needed. Then you're assured that everybody is able to see the extra form. In that case, you'd start with the showNew class initiated:

<div class="radioFields showNew">
    ...
</div>

And remove the class with JS as soon as the document loads:

$('.radioFields').removeClass('showNew');

Then run the JS as before. The only drawback here is that your radio buttons could be out of sync with the form--someone could fill out the 'new' form even though the accompanying checkbox is not checked. If you're worried about that, though, some server-side checking could catch the problem and alert the user.