How can I make toggable divs for multiple choices, if possible using jquery and/or bootstrap?

Question

I'd like to make a beautiful multiple choice HTML page. I want to have 3 or 4 <div>s including images and/or text, and users should be able to toggle each <div> "on" or "off" by simply clicking anywhere on the <div> (there should be a highlighting effect, if possible with an animation). When the form gets submitted, the server should be sent the state of each <div>, as if it were a checkbox.

I have searched all over the place but could not find something like that. It seems so basic that I probably overlooked something trivial. Any ideas? I already use jQuery and bootstrap, so if there's a simple solution based only on these frameworks, I'd be very happy.

Thanks.

Edit: I don't want the <div>s to move or disappear. I just want a "highlighting" effect, such as changing the background color to blue when the <div> is selected, and back to white when it is unselected.

Answer 1

I would recommend starting with a good HTML base. I would probably use a hidden radio button inside each div and check or uncheck it when the div was clicked. The radio button would be a valid item on the form which would submit the selected value.

HTML:

<div class="choice">
    <input id="choice_1" type="radio" name="choice" value="choice_1" />
    <label for="choice_1">Chicago</label>
</div>

<div class="choice">
    <input id="choice_2" type="radio" name="choice" value="choice_2" />
    <label for="choice_2">Los Angeles</label>
</div>


<div class="choice">    
    <input id="choice_3" type="radio" name="choice" value="choice_3" />
    <label for="choice_3">San Francisco</label>
</div>

​JavaScript:

$(document).ready(function() {
    var choices = $('.choice');

    choices.on('click', function(event) {
        var choice = $(event.target);
        choice
            .find('[name="choice"]')
            .prop('checked', true)
            .trigger('change');
    });

    var inputs = $('.choice input');
    inputs.on('change', function(event) {
        var input = $(event.target);
        var choice = $(this).closest('.choice');

        $('.choice.active').removeClass('active');
        choice.addClass('active');
    });
});​

Demo: jsfiddle

Alternative: if you want multiple selected at once

So with radio buttons only one within the radio button group is active at a time. If that is not the behavior you want, you could use a hidden checkbox and toggle it on and off.

HTML:

<div class="choice">
    <input id="choice_1" type="checkbox" name="choice_1" value="choice_1" />
    <label for="choice_1">Chicago</label>
</div>

<div class="choice">
    <input id="choice_2" type="checkbox" name="choice_2" value="choice_2" />
    <label for="choice_2">Los Angeles</label>
</div>


<div class="choice">    
    <input id="choice_3" type="checkbox" name="choice_3" value="choice_3" />
    <label for="choice_3">San Francisco</label>
</div>

​JavaScript:

$(document).ready(function() {
    var choices = $('.choice');

    choices.on('click', function(event) {
        var choice = $(event.target);
        var input = choice.find('[type="checkbox"]');
        input
            .prop('checked', !input.is(':checked'))
            .trigger('change');
    });

    var inputs = $('.choice input');
    inputs.on('change', function(event) {
        var input = $(event.target);
        var choice = $(this).closest('.choice');

        if (input.is(':checked')) {
            choice.addClass('active');
        }
        else {
            choice.removeClass('active');
        }
    });
});​

Demo: jsfiddle