aiden87 aiden87 - 6 months ago 38
jQuery Question

show bootstrap toggle text before change

I am using bootstrap toggle in my app, and what i'm trying to achieve is display text before the click actually happens. Now no text is shown before click and when i click on toggle it results in "toggle: true" and "toggle:false" .

I would like to display text before the click happens - like this: Music is currently: off, ...and then on click it would change to on / another click off again..


<div class="widget widget-table">
$(function () {
$('#toggle-event').change(function () {
$('#music-info').html('Music is currently ' + $(this).prop('checked'))


<div id="music-info"></div>
<input id="toggle-event" type="checkbox" data-toggle="toggle">

Any help?

Thank you!

Answer Source

I'm not sure if I'm undersatnding you well, is this what you want?

$(function () {

    $('#music-info').html('Music is currently ' + ($('#toggle-event').prop('checked') ? 'ON' : 'OFF') )

    $('#toggle-event').change(function () {
        $('#music-info').html('Music is currently ' + ($(this).prop('checked') ? 'ON' : 'OFF') )

Check it here...

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download