<div mbsc-form>
    <div class="mbsc-align-center">
        <div class="mbsc-note mbsc-note-primary">Use collapsible groups for segmenting long forms and to hide content.</div>
    </div>
    <div class="mbsc-btn-group-block">
        <button mbsc-button id="toggle-first">Toggle first group</button>
        <button mbsc-button id="close-all">Close all groups</button>
    </div>
    <div class="mbsc-form-group" data-collapsible data-open>
        <div class="mbsc-form-group-title">
            Contact details
        </div>
        <div class="mbsc-form-group-content">
            <label>
                First Name
                <input mbsc-input type="text"  name="first" placeholder="Your first name" />
            </label>
            <label>
                Last Name
                <input mbsc-input type="text" name="last" placeholder="Your last name" />
            </label>
            <label>
                Company
                <input mbsc-input type="text" placeholder="Company if applicable" />
            </label>
            <label>
                Phone
                <input mbsc-input type="tel" placeholder="Your phone number" />
            </label>
            <label>
                Email
                <input mbsc-input type="email" placeholder="Your email address" name="email" />
            </label>
        </div>
    </div>

    <div class="mbsc-form-group" data-collapsible>
        <div class="mbsc-form-group-title">
            Shipping address
        </div>
        <div class="mbsc-form-group-content">
            <label>
                Address
                <textarea mbsc-textarea placeholder="Shipping address"></textarea>
            </label>
            <label>
                City
                <input mbsc-input type="text" placeholder="City" />
            </label>
            <label>
                State/Region
                <input mbsc-input type="text" placeholder="State/Region" />
            </label>
            <label>
                Zip
                <input mbsc-input type="text" placeholder="Zip/Postal code" />
            </label>
            <label>
                Country
                <select mbsc-dropdown>
                    <option>Please Select</option>
                </select>
            </label>

        </div>
    </div>

    <div class="mbsc-form-group" data-collapsible>
        <div class="mbsc-form-group-title">
            Payment details
        </div>

        <div class="mbsc-form-group-content">
            <label>
                Name
                <input mbsc-input type="text" placeholder="Name on card" />
            </label>
            <label>
                Card
                <input mbsc-input type="text" class="md-card-num" placeholder="Credit card number" />
            </label>
            <label>
                Expiration
                <select mbsc-dropdown>
                    <option>12/2018</option>
                    <option>01/2019</option>
                    <option>02/2019</option>
                </select>
            </label>
            <label>
                Security
                <input mbsc-input type="number" placeholder="3-digit CVV" />
            </label>
        </div>
    </div>
</div>

<div mbsc-form mbsc-accordion>
    <div class="mbsc-align-center">
        <div class="mbsc-note mbsc-note-primary">Use the accordion on forms to open only one panel at a time.</div>
    </div>
    <div class="mbsc-btn-group-block">
        <button mbsc-button id="toggle-last">Toggle last panel</button>
        <button mbsc-button id="close-all">Close all panels</button>
    </div>
    <div class="mbsc-form-group" data-collapsible data-open>
        <div class="mbsc-form-group-title">
            What is Mobiscroll?
        </div>
        <div class="mbsc-form-group-content">
            <div class="mbsc-padding">
                <p>Mobiscroll UI is a library of components for progressive webapps and hybrid development. Created with a lot of attention to usability and performance. Learn more about mobiscroll and see if it is for you?</p>
            </div>
        </div>
    </div>

    <div class="mbsc-form-group" data-collapsible>
        <div class="mbsc-form-group-title">
            Upgrades
        </div>
        <div class="mbsc-form-group-content">
            <div class="mbsc-padding">
                <p>You can start out with a Component license and move to Framework if you need the additional functionality. The same goes for upgrading to the Complete license. The upgrade fee is the price difference between the two tiers.</p>
            </div>
        </div>
    </div>

    <div class="mbsc-form-group" data-collapsible>
        <div class="mbsc-form-group-title">
            Usage
        </div>
        <div class="mbsc-form-group-content">
            <div class="mbsc-padding">
                <p>You can use mobiscroll in your responsive or mobile webapps and hybrid apps (like Cordova, Phonegap, Ionic). Mobiscroll is framework agnostic and runs everywhere where Javascript can be executed. However it comes in a couple of flavors
                    for major Frameworks: Plain Javascript, jQuery and jQuery Mobile, Angular and Angular based frameworks (like Ionic) - both Angular JS and Angular 2+ is supported and React.</p>
            </div>
        </div>
    </div>

    <div class="mbsc-form-group" data-collapsible>
        <div class="mbsc-form-group-title">
            Theme Builder
        </div>
        <div class="mbsc-form-group-content">
            <div class="mbsc-padding">
                <p>The Theme Builder is the quickest way to get beautiful and professional looking themes that match your brand and application. We provide a super-easy to use tool where themes can be customized with just a couple of clicks. You can create
                    your custom themes with a Trial account and download once upgraded to the full product.</p>
            </div>
        </div>
    </div>
</div>