javascript - how to integrate a toggle button with hidden content (bootstrap) - Stack Overflow

admin管理员组

文章数量:1315304

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?

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?

• javascript
• jquery
• twitter-bootstrap
• jquery-plugins

Share Improve this question Follow edited Oct 18, 2013 at 15:32 Limon asked Oct 17, 2013 at 19:40 LimonLimon 1,79377 gold badges3333 silver badges6363 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

I'm not sure if I understand pletely 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/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 Formponents 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...

<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 modo 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./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

If for example your toggle-able icon is visible only for extra small devices, then you could do something like this:

$('[data-toggle="offcanvas"]').click(function () {
    $('#side-menu').toggleClass('hidden-xs');
});

Clicking [data-toggle="offcanvas"] will add bootstrap's .hidden-xs to my #side-menu which will hide the side-menu content, but will bee visible again if you increase the window size.

本文标签： javascripthow to integrate a toggle button with hidden content (bootstrap)Stack Overflow