jQuery UI & Tabs: Collapsible content

This entry is part 3 of 7 in the series jQuery UI Tabs

jQuery UI Tabs – Collapse content

Click the selected tab to toggle its content closed/open.

To enable this functionality, set the collapsible option to true.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Tabs - Collapse content</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#tabs').tabs({
                collapsible: true
            });
        });
    </script>
</head>
<body>

<div id='tabs'>
    <ul>
        <li><a href='#tabs-1'>Pitbull</a></li>
        <li><a href='#tabs-2'>Sean Kingston</a></li>
        <li><a href='#tabs-3'>Taylor Swift</a></li>
    </ul>
    <div id='tabs-1'>
        <p><strong>Click this tab again to close the content pane.</strong></p>

        <p>Pitbull is a Cuban–American recording artist and Latin Grammy winning rapper from Miami, Florida.</p>
    </div>
    <div id='tabs-2'>
        <p><strong>Click this tab again to close the content pane.</strong></p>

        <p>Sean Kingston pursued a music career and debuted in 2007 with the album Sean Kingston.</p>
    </div>
    <div id='tabs-3'>
        <p><strong>Click this tab again to close the content pane.</strong></p>

        <p>Taylor Swift, raised in Wyomissing, Pennsylvania. She moved to Nashville, Tennessee at the age of
            fourteen.</p>
    </div>
</div>

</body>
</html>
Try The Code Tab Widgets Api Doc

jQuery UI & Accordion: Allow All Sections To Be Collapsible

This entry is part 3 of 7 in the series jQuery UI Accordion

jQuery UI Accordion – Collapse content

By default, accordions always keep one section open.

To allow for all sections to be be collapsible, set the collapsible option to true. Click on the currently open section to collapse its content pane.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Accordion - Collapse content</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function() {
            $( '#accordion' ).accordion({
                collapsible: true
            });
        });
    </script>
</head>
<body>

<div id='accordion'>
    <h3>Section 1</h3>
    <div>
        <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
    </div>
    <h3>Section 2</h3>
    <div>
        <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
    </div>
    <h3>Section 3</h3>
    <div>
        <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>
    <h3>Section 4</h3>
    <div>
        <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
    </div>
</div>

</body>
</html>
Try The Code

jQuery Mobile: A Form Inside A Collapsible Content List

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

In jQuery Mobile, we can have a form inside a collapsible content list.  This is done by using the fieldset tag with data-role=’collapsible’.

The fieldset is put one level under the form tag.

Inside the collapsible form, there is a text-input field and 3 checkboxes for selection.

<!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>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Collapsible</h1></div>
    <br>

    <form>
        <fieldset data-role='collapsible'>
            <legend>Form Inside A Collapsible</legend>
            <label for='textinput_id'>Text Input:</label>
            <input type='text' name='textinput' id='textinput_id' placeholder='Text input' value=''>

            <div data-role='controlgroup'>
                <input type='checkbox' name='checkbox_n1' id='checkbox_id1'>
                <label for='checkbox_id1'>One</label>
                <input type='checkbox' name='checkbox_n2' id='checkbox_id2'>
                <label for='checkbox_id2'>Two</label>
                <input type='checkbox' name='checkbox_n3' id='checkbox_id3'>
                <label for='checkbox_id3'>Three</label>
            </div>
        </fieldset>
    </form>

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

jQuery Mobile: Collapsible Expanded

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

In jQM collapsibles, you can have the content expanded as a default.

This is done by using the attribute data-collapsed=’false’.

<!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>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Collapsible</h1></div>
    <br>

    <p>Collapsible Expanded</p>

    <div data-role='collapsible' data-collapsed='false'>
        <h4>Heading</h4>
        <ul data-role='listview'>
            <li><a href='#'>List item 1</a></li>
            <li><a href='#'>List item 2</a></li>
            <li><a href='#'>List item 3</a></li>
        </ul>
    </div>

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

The list has a href which is supposed to be a link and so it will automatically create a > arrow on the right hand side of the list.

jQuery Mobile: Collapsible with 2 themes

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

jQuery Mobile provides two themes, theme a and theme b.

In this example, we use 2 themes to separate out the the header and the content.

<!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'>
    <div data-role='header'><h1>Collapsible</h1></div>
    <br>

    <p>Collapsible With Themes</p>

    <div data-role='collapsible' data-theme='b' data-content-theme='a'>
        <h4>Heading</h4>
        <p>I'm the collapsible content with a themed content block set to 'a'.</p>
    </div>

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

The line that specified the 2 themes is

<div data-role=’collapsible’ data-theme=’b’ data-content-theme=’a’>