jQuery Mobile: Basic Collapsible Header

This entry is part 25 of 73 in the series jQuery Mobile

To create a collapsible header, simply use data-role=’collapsible’ as the attribute.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<br>
<div data-role='page'>
    <div data-role='header'><h1>Collapsible</h1></div>
    <br>
    <p>You can click on me</p>
    <div data-role='collapsible'>
    <h4>Heading</h4>
    <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code

jQuery Mobile: All Checkboxes

This entry is part 20 of 73 in the series jQuery Mobile

Checkbox inputs are used to provide a list of options where more than one can be selected.

Here I put them all in a page.

All Checkboxes
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page' id='pageone'>
    <div data-role='header'><h1>Checkbox App</h1></div>
    <br>
    <p>Basic Check Box</p>
    <form>
        <label>
            <input type='checkbox' name='checkbox-0 '>Check me
        </label>
    </form>
<br>
    <p>Mini Size Check Box</p>
    <form>
        <input type='checkbox' name='checkbox-mini-0' id='checkbox-mini-0' data-mini='true'>
        <label for='checkbox-mini-0'>I agree</label>
    </form>
    <br>
    <p>Vertical Group Check Box</p>
    <form>
        <fieldset data-role='controlgroup'>
            <input type='checkbox' name='checkbox-v-2a' id='checkbox-v-2a'>
            <label for='checkbox-v-2a'>One</label>
            <input type='checkbox' name='checkbox-v-2b' id='checkbox-v-2b'>
            <label for='checkbox-v-2b'>Two</label>
            <input type='checkbox' name='checkbox-v-2c' id='checkbox-v-2c'>
            <label for='checkbox-v-2c'>Three</label>
        </fieldset>
    </form>
    <br>
    <p>Horizontal Group Check Box</p>
    <form>
        <fieldset data-role='controlgroup' data-type='horizontal'>
            <input type='checkbox' name='checkbox-h-2a' id='checkbox-h-2a'>
            <label for='checkbox-h-2a'>One</label>
            <input type='checkbox' name='checkbox-h-2b' id='checkbox-h-2b'>
            <label for='checkbox-h-2b'>Two</label>
            <input type='checkbox' name='checkbox-h-2c' id='checkbox-h-2c'>
            <label for='checkbox-h-2c'>Three</label>
        </fieldset>
    </form>

    <br>
    <p>Icon Position right</p>
    <form>
        <fieldset data-role='controlgroup' data-iconpos='right'>
            <input type='checkbox' name='checkbox-h-6a' id='checkbox-h-6a'>
            <label for='checkbox-h-6a'>One</label>
            <input type='checkbox' name='checkbox-h-6b' id='checkbox-h-6b'>
            <label for='checkbox-h-6b'>Two</label>
            <input type='checkbox' name='checkbox-h-6c' id='checkbox-h-6c'>
            <label for='checkbox-h-6c'>Three</label>
        </fieldset>
    </form>

    <br>
    <p>Theme B</p>
    <form>
        <fieldset data-role='controlgroup'>
            <input type='checkbox' name='checkbox-t-2a' id='checkbox-t-2a' data-theme='b'>
            <label for='checkbox-t-2a'>One</label>
            <input type='checkbox' name='checkbox-t-2b' id='checkbox-t-2b' data-theme='b'>
            <label for='checkbox-t-2b'>Two</label>
            <input type='checkbox' name='checkbox-t-2c' id='checkbox-t-2c' data-theme='b'>
            <label for='checkbox-t-2c'>Three</label>
        </fieldset>
    </form>

    <br>
    <p>Disabled</p>
    <form>
        <input disabled='' type='checkbox' name='checkbox-t-2d' id='checkbox-t-2d' data-theme='a'>
        <label for='checkbox-t-2d'>One</label>
    </form>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code

If the input isn’t wrapped in its corresponding label, be sure to set the for attribute of the label to match the id of the input so that they are associated.