Collapsible Page Form
A base collection of field components rendered within multi collapsible tabs.
Example
<div style="background-color: white">
<!-- Header section -->
<section class="my-8 mx-md-8">
<nav class="cgds" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#"><i class="bi bi-house"></i>Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<div class="mb-4 row">
<div class="col-md-6 col-12">
<h1>Sign-up</h1>
<p class="text-muted">
Already a member?
<a href="" class="text-decoration-none">Log in</a>
</p>
</div>
<div class="d-flex justify-content-end align-items-center col-md-6 col-12">
<a href="" class="me-4">Cancel</a>
<button type="button" class="me-4 btn btn-outline-dark cgds">
Save as draft
</button>
<button type="button" class="btn btn-secondary cgds">
Next
</button>
</div>
</div>
</section>
<!-- Accordion component nesting form -->
<div class="mx-md-8 shadow cgds accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
<i class="bi bi-info-circle-fill"></i>
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
data-bs-parent="#accordionExample">
<div class="p-5 accordion-body">
<div class="col-sm-8">
<form>
<div class="row">
<div class="mb-3 col-md-6 col-12">
<label class="form-label" for="formCollapsibleInput1">Label</label><input
placeholder="Text goes here" type="text" id="formCollapsibleInput1"
class="form-control" />
</div>
<div class="mb-3 col-md-6 col-12">
<label class="form-label" for="formCollapsibleSinglePageInput2">Label</label><input
placeholder="Text goes here" type="text" id="formCollapsibleSinglePageInput2"
class="form-control" />
</div>
</div>
<div class="mb-3">
<label class="form-label" for="formCollapsibleInput3">Label</label>
<div class="mb-3 input-group cgds">
<input placeholder="Text goes here"
aria-label="Dollar amount (with dot and two decimal places)"
id="formCollapsibleInput3" class="form-control" /><span
class="input-group-text">@something</span>
</div>
</div>
<div class="mb-3">
<label class="form-label" for="formCollapsibleInput4">Label</label><input
placeholder="Text goes here" type="text" id="formCollapsibleInput4"
class="form-control" />
</div>
</form>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<i class="bi bi-info-circle-fill"></i>
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
data-bs-parent="#accordionExample">
<div class="p-5 accordion-body">
<div class="col-sm-8">
<div class="mb-3">
<label class="form-label" for="formCollapsibleSelect1">Label</label><select
class="form-select" id="formCollapsibleSelect1">
<option>Text goes here</option>
<option>Text goes here</option>
<option>Text goes here</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<i class="bi bi-info-circle-fill"></i>
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="p-5 accordion-body">
<div class="col-sm-8">
<div class="mb-3">
<label class="form-label" for="formCollapsibleRadio1">Label</label>
<div class="form-check">
<input name="radioGroup1" type="radio" id="formCollapsibleRadio1" class="form-check-input" />
<label title="" for="formCollapsibleRadio1" class="form-check-label">Input 1</label>
</div>
<div class="form-check">
<input name="radioGroup1" type="radio" id="formCollapsibleRadio1" class="form-check-input" />
<label title="" for="formCollapsibleRadio1" class="form-check-label">Input 2</label>
</div>
<div class="form-check">
<input name="radioGroup1" type="radio" id="formCollapsibleRadio1" class="form-check-input" />
<label title="" for="formCollapsibleRadio1" class="form-check-label">Input 3</label>
</div>
</div>
<div class="mb-3">
<label class="form-label" for="formCollapsibleInput5">Label</label>
<textarea rows="5" placeholder="This is the text that has been filled in" type="text" id="formCollapsibleInput5" class="form-control"></textarea>
</div>
<div class="mb-3">
<div class="form-check">
<input type="checkbox" id="formCollapsibleCheckbox1" class="form-check-input" />
<label title="" for="formCollapsibleCheckbox1" class="form-check-label">I agree to the terms of the Subscriber Agreement and the Privacy Policy</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-end my-8 mx-md-8">
<button type="button" class="btn btn-primary cgds">Submit</button>
</div>
<!-- Footer component -->
<footer class="cgds footer">
<section class="footer-top">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="widget flex-column">
<div class="logo">
<img src="/assets/uncompressed_images/rachana.svg" style="width: 200px"
alt="dgc logo">
</div>
<div class="social-icon">
<ul>
<li>
<a href="">
<img src="/assets/uncompressed_images/icon/Facebook.svg"
alt="facebook-icon">
</a>
</li>
<li>
<a href="">
<img src="/assets/uncompressed_images/icon/YouTube.svg" alt="youtube-icon">
</a>
</li>
<li>
<a href="">
<img src="/assets/uncompressed_images/icon/Telegram.svg"
alt="telegram-icon">
</a>
</li>
<li>
<a href="">
<img src="/assets/uncompressed_images/icon/Tiktok.svg" alt="tiktok-icon">
</a>
</li>
<li>
<a href="">
<img src="/assets/uncompressed_images/icon/Linkin.svg" alt="linkin-icon">
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="title">
Column 1
</div>
<ul class="links">
<li><a href="">About Us</a></li>
<li><a href="">This is a super long link</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="title">
Column 2
</div>
<ul class="links">
<li><a href="">About Us</a></li>
<li><a href="">This is a super long link</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="title">
Column 3
</div>
<ul class="links">
<li><a href="">About Us</a></li>
<li><a href="">This is a super long link</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
</div>
</div>
</div>
</section>
<section class="footer-bottom">
<div class="container-fluid">
<div class="row footer-copyrights">
<div class="col">
<div class="d-flex justify-content-lg-start text-start">
DGC © 2023 ~ All rights reserved. Digital Government Committee.<br>
</div>
</div>
<div class="col">
<div class="d-flex justify-content-lg-end text-end">
<ul>
<li><a href="" target="_blank" rel="noopener noreferrer">Report Vulnerability</a></li>
<li><a href="">Privacy Statement</a></li>
<li><a href="">Terms of use</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
</footer>
