how to integrate a toggle button with hidden content (bootstrap)

Question

I want to use a bootstrap toggle buttom (ON-OFF), here is my html code:

<div class="control-group">
    <label class="control-label">Filtrar por Tipo de Usuario?</label>
    <div class="controls">
        <div class="basic-toggle-button">
            <input type="checkbox" class="toggle" checked="checked" id="test"/>
        </div>
    </div>
    <div id="content" class="hide">
        <p>testing</p>
    </div>
</div>

I have also a plugin for the button (which i don't understand entirely)

what i want to achieve is, to show or hide some content when i press the on/off button

So far i have this script:

var FormComponents = function () {

    $('.hide').hide();

        $('#test').click(function(){
            $('#content').toggle();
        });

    var handleToggleButtons = function () {
        if (!jQuery().toggleButtons) {
            return;
        }
        $('.basic-toggle-button').toggleButtons();
    }

    return {
        //main function to initiate the module
        init: function () {
            handleToggleButtons();
        }
    };
}();

So with this i have my perfect on/off button. The thing is that i don't know how to integrate the "show/hide" function to show some content once the button is pressed.

So far i've done my research and found this more adequate:

example of hide/show function

I am trying to put this things together in order to show and hide content but i can't make it work, do i have to edit the plugin or my script file? How can i make it work?

Solution 1

I'm not sure if I understand completely but here is an example of how you can do this using jQuery.

HTML

<label>Filtrar por Tipo de Usuario?</label>
   <input type="checkbox" id="test">

<div id="content" class="hide">
  <p>testing</p>
</div>

jQuery

$(document).ready(function(){
  $('.hide').hide();
  $('#test').click(function(){
    $('#content').toggle();
  });        
});

http://jsfiddle.net/BnjJx/

Update

On your code you have the snippet in your handleToggleButtons function but that function is not being initilized on runtime.. If you put it just inside your Formcomponents function the code will process at runtime and it will work.

var FormComponents = function () {   
    $('.hide').hide();
    $('#test').click(function(){
        $('#content').toggle();
    });
    var handleToggleButtons = function () {
    //etc...

Solution 2

<div class="control-group">
    <label class="control-label">Filtrar por Tipo de Usuario?</label>
    <div class="controls">
        <div class="basic-toggle-button">
            <input type="checkbox" class="toggle" checked="checked" id="option" />
        </div>
    </div>
    <div id="hidden_content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

In your CSS:

#hidden_content { display: none;}

In your JAVASCRIPT:

$('#option').click(function(){
    //var val = $(this).val();
    $('#hidden_content').slideToggle();
});

VIEW DEMO