jQuery/jQTouch - How do you code a toggle button?

Question

I'm almost finished my Document Manager's project, but I have been asked to add in Toggle buttons. I have already linked the javascript and css code but am stuck with the html code. I know to put the

  <input type = 'checkbox' .... />

can anyone help fill in the rest? I'm really stuck.

Thanks so much in advance

Answer 1

thanks for the clarification. to create a toggle button like this:

http://www.google.co.uk/imgres?num=10&hl=en&biw=1366&bih=643&tbm=isch&tbnid=CfXL9cv8l0CfvM:&imgrefurl=http://mitchjinfo.deviantart.com/art/iPhone-Toggle-Button-173878367&docid=KCfqyS-NlBl4eM&imgurl=http://fc03.deviantart.net/fs71/f/2010/215/2/0/iPhone_Toggle_Button_by_mitchjinfo.png&w=400&h=300&ei=ffJqUMnTOcP80QXosYCwDA&zoom=1&iact=rc&dur=1&sig=117831312973390827386&page=1&tbnh=136&tbnw=224&start=0&ndsp=23&ved=1t:429,r:0,s:0,i:71&tx=115&ty=55

you can use code that looks something like this:

<div id="toggleImage">
    <img id="toggleOn" class="toggle" src="on.jpg" />
    <img id="toggleOff" class="toggle" src="off.jpg" />
</div>

$(document).ready(function(){
    $('.toggle').click(function(){
        $(this).hide();
        $(this).sibbling('img').show();
        /* the code for whatever you are toggling goes here */
    });
});

the code for whatever you are toggling could include showing or hiding the Notification content or whatever it is you would like to be toggling on the page. For this on.jpg is the toggle "on" image, and off.jpg is the toggle "off" image just like the buttons for the iphone.