Skip to content

Commit

Permalink
Added HTML,CSS,and JS for Expand/Collapse Accordions
Browse files Browse the repository at this point in the history
  • Loading branch information
@claytonjbarnette
claytonjbarnette committed May 23, 2023
1 parent e745ff6 commit e90cc9c
Show file tree
Hide file tree
Showing 8 changed files with 133 additions and 175 deletions.
59 changes: 50 additions & 9 deletions _assets/css/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
@forward "usa-icon";


// CSS targets, not used for styling, keep empty, used in js to target classes.
.gsa-target-accordion-header {}
.gsa-target-accordion-content-area {}


// Important: Colors for H1 and H2 in usa-layout-docs element
.usa-layout-docs h1 {
Expand All @@ -13,19 +17,56 @@
color:#005ea2;
}

// GSA Expand all button, used at the top of a list of accordions as an html button
.gsa-expand-all {
width:100px;
// GSA Expand and Collapse buttons, used at the top of a list of accordions as an html button group
.expand-collapse-button-group {
width: 200px;
list-style: none;
margin-bottom:0px;
}
// Collapse Button
.gsa-collapse-button {
width:75px;
background-color:#F0F0F0;
text-align: center;
font-size:22pt;
color: #1b1b1b;
border: 0px;
border-top-right-radius:5px;
border-left-color: #555;
margin-right:0px;
padding-left: 10px;
padding-right: 10px;
display: inline;
cursor: pointer;
margin-bottom: 0px;
float: right;
}
// Collapse Button hover state
.gsa-collapse-button:hover,.gsa-collapse-button:focus {
background-color: #dfe1e2;
color: #1b1b1b;
}
// Expand Button
.gsa-expand-button {
width:75px;
background-color:#F0F0F0;
font-size:20pt;
text-align: center;
font-size:22pt;
color: #1b1b1b;
border:0px;
border-top-left-radius:5px;
border-top-right-radius:5px;
float:right;
clear: right;
margin-right:0px;
display: block;

padding-left: 10px;
padding-right: 10px;
display: inline;
cursor: pointer;
margin-bottom: 0px;
float: right;
}
// Expand Button hover and focus state
.gsa-expand-button:hover,.gsa-expand-button:focus {
background-color: #dfe1e2;
color: #1b1b1b;
}


Expand Down
56 changes: 31 additions & 25 deletions _assets/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,28 +22,34 @@ function gsaTop() {
}


// Toggle accordions open or closed.
// Open
// function expandToggle(){
// // variable for accordion headers and body
// var closedaccordionheader = document.getElementsByClassName('usa-accordion__button gsa-normal-text');
// var closedaccordionbody = document.getElementsByClassName('usa-accordion__content usa-prose');

// // Loop through elements on the page with the CSS usa-accordion class
// for(var i = 0;i < document. ;i++){

// }

// }
// // Closed
// function collapseToggle(){
// // variable for accordion headers and body
// var openaccordionheaders = document.getElementsByClassName('usa-accordion__button gsa-normal-text');
// var openaccordionbody = document.getElementsByClassName('usa-accordion__content usa-prose');

// // Loop through elements on the page with the CSS usa-accordion class
// for(var i = 0;openaccordions.length;i++){

// }

// }
// Toggle accordions open or closed.
//
// Target all accordion button headers and content areas
// Only affects elements with the classes gsa-target-accordion-header and gsa-target-accordion-content-area
// Add these classes to accordion header and content areas elements respectivly to target those elements in JS.
//
var accordionbutton = document.getElementsByClassName('gsa-target-accordion-header');
var accordioncontent = document.getElementsByClassName('gsa-target-accordion-content-area');
//
// Open Accordion
function expandToggle(){
// Loop through accordion button, setting the aria-expanded attribute to false(changes the icon to -)
for(var i = 0;i < accordionbutton.length;i++){
accordionbutton[i].setAttribute('aria-expanded','true');
}
// Loop through accordion content area, removing the hidden attribute to display the accordion body)
for(var i = 0;i < accordioncontent.length;i++){
accordioncontent[i].removeAttribute('hidden');
}
}
// Closed Accordion
function collapseToggle(){
// Loop through accordion button, setting the aria-expanded attribute to false(changes the icon to -)
for(var i = 0;i < accordionbutton.length;i++){
accordionbutton[i].setAttribute('aria-expanded','false');
}
// Loop through accordion content area, removing the hidden attribute to display the accordion body)
for(var i = 0;i < accordioncontent.length;i++){
accordioncontent[i].setAttribute('hidden',null);
}
}
9 changes: 7 additions & 2 deletions _faq/faqs.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,18 @@ subnav:

{% assign lcount = 0 %}
{% for faq in site.data.faqs %}
<hr>
<ul class="gsa-expand-collapse-group" title="Expand or Collapse All" aria-label="Expand or Collapse All">
<li class="gsa-collapse-button" onclick="collapseToggle()" title="Collapse All" aria-label="Collapse All"> - </li>
<li class="gsa-expand-button" onclick="expandToggle()" title="Expand All" aria-label="Expand All"> + </li>
</ul>
<div class="usa-accordion usa-accordion--bordered">
<h4 class="usa-accordion__heading">
<button type="button" class="usa-accordion__button gsa-normal-text" aria-expanded="{{law.expanded}}" aria-controls="gsa-{{forloop.index}}">
<button type="button" class="usa-accordion__button gsa-normal-text gsa-target-accordion-header" aria-expanded="{{law.expanded}}" aria-controls="gsa-{{forloop.index}}">
{{faq.question}}
</button>
</h4>
<div id="gsa-{{forloop.index}}" class="usa-accordion__content usa-prose">
<div id="gsa-{{forloop.index}}" class="usa-accordion__content usa-prose gsa-target-accordion-content-area">
<p>
{{faq.answer}}
<hr/>
Expand Down
11 changes: 6 additions & 5 deletions _university/laws.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,18 +17,19 @@ pdf: "docs/ficam-arch.pdf"
Review the federal laws that impact and shape the implementations of ICAM programs and systems.

<hr/>
<div>
<button class="gsa-expand-all"> + </button>
</div>
<ul class="gsa-expand-collapse-group" title="Expand or Collapse All" aria-label="Expand or Collapse All">
<li class="gsa-collapse-button" onclick="collapseToggle()" title="Collapse All" aria-label="Collapse All"> - </li>
<li class="gsa-expand-button" onclick="expandToggle()" title="Expand All" aria-label="Expand All"> + </li>
</ul>
{% assign lcount = 0 %}
{% for law in site.data.laws %}
<div class="usa-accordion usa-accordion--bordered">
<h4 class="usa-accordion__heading">
<button type="button" class="usa-accordion__button gsa-normal-text" aria-expanded="{{law.expanded}}" aria-controls="gsa-{{forloop.index}}">
<button type="button" class="usa-accordion__button gsa-normal-text gsa-target-accordion-header" aria-expanded="{{law.expanded}}" aria-controls="gsa-{{forloop.index}}">
{{law.name}} ({{law.pubdate}})
</button>
</h4>
<div id="gsa-{{forloop.index}}" class="usa-accordion__content usa-prose">
<div id="gsa-{{forloop.index}}" class="usa-accordion__content usa-prose gsa-target-accordion-content-area">
<p>
<div class="display-flex flex-column flex-align-end">
<span class="usa-tag">{{law.doctype}}</span>
Expand Down
52 changes: 6 additions & 46 deletions _university/policies.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,59 +18,19 @@ pdf: "docs/ficam-arch.pdf"
Review the federal policies that impact and shape the implementations of ICAM programs and systems.

<hr/>

<!-- <a href="https://www.opm.gov/policy-data-oversight/covid-19/temporary-procedures-for-personnel-vetting-and-appointment-of-new-employees-during-maximum-telework-period-due-to-coronavirus-covid-19/" target="_blank" rel="noopener noreferrer">**Office of Personnel Management Memorandum: Temporary Procedures for Personnel Vetting and Appointment of New Employees during Maximum Telework Period due to Coronavirus COVID-19**</a> (March 2020)<br/>
> _Temporary_. This memorandum sets forth _temporary procedures_ for the vetting and appointment of federal personnel, collection of biometrics for federal employment, and employment authorization and eligibility.
<a href="https://www.whitehouse.gov/wp-content/uploads/2020/03/M-20-19.pdf" target="_blank" rel="noopener noreferrer">**M 20-19: Harnessing Technology to Support Mission Continuity**</a> (PDF, March 2020)<br/>
> _Temporary_. This memorandum directs that agencies utilize technology to the greatest extent practicable to support mission continuity during the national emergency. By aggressively embracing technology to support business processes, the federal government is better positioned to maintain the safety and well-being of the federal workforce and the American public while supporting the continued delivery of vital mission services. The set of _frequently asked questions_ are intended to provide additional guidance and further assist the IT workforce as it addresses impacts.
<a href="https://www.whitehouse.gov/wp-content/uploads/2019/05/M-19-17.pdf" target="_blank" rel="noopener noreferrer">**M-19-17: Enabling Mission Delivery through Improved Identity, Credential, and Access Management (ICAM)**</a> (PDF, May 2019)<br/>
> This memorandum sets forth the federal government’s ICAM policy. To ensure secure and efficient operations, agencies of the federal government must be able to identify, credential, monitor, and manage subjects that access federal resources. This includes information, information systems, facilities, and secured areas across their respective enterprises. In particular, how agencies conduct identity proofing, establish enterprise digital identities, and adopt sound processes for authentication and access control significantly affects the security and delivery of their services as well as individuals’ privacy.
<a href="https://www.whitehouse.gov/wp-content/uploads/2018/12/M-19-03.pdf" target="_blank" rel="noopener noreferrer">**M-19-03: Strengthening the Cybersecurity of Federal Agencies by enhancing the High Value Asset (HVA) Program**</a> (PDF, December 2018)<br/>
> With the creation of the HVA initiative in 2015, the federal government’s CFO Act agencies took a pivotal step toward the identification of its most critical assets. DHS, in coordination with OMB, established a capability to assess agency HVAs, resulting in the identification of critical areas of weakness and plans to remediate those areas of weakness. It established three possible categories for designating federal information or a federal information system as an HVA: Informational Value, Mission Essential, or Federal Civilian Enterprise Essential (FCEE). It also updates the required approach for agencies to report, assess, and remediate HVAs to protect against cyberattacks.
<a href="https://www.federalregister.gov/documents/2018/05/18/2018-10855/enhancing-the-effectiveness-of-agency-chief-information-officers" target="_blank" rel="noopener noreferrer">**Executive Order 13833: Enhancing the Effectiveness of Agency Chief Information Officers (CIOs)**</a> (May 2018)<br/>
> This executive order authorizes federal agency CIOs to ensure that agency IT systems are as modern, secure, and well-managed as possible to reduce costs, mitigate cybersecurity risks, and deliver improved services to the American people.
<a href="https://www.federalregister.gov/documents/2017/05/16/2017-10004/strengthening-the-cybersecurity-of-federal-networks-and-critical-infrastructure" target="_blank" rel="noopener noreferrer">**Executive Order 13800: Strengthening the Cybersecurity of Federal Networks and Critical Infrastructure**</a> (May 2017)<br/>
> This executive order places an emphasis on modernizing and securing federal networks and critical infrastructure from the ever-growing threat of cyberattacks.
<a href="https://www.whitehouse.gov/wp-content/uploads/legacy_drupal_files/omb/circulars/A108/omb_circular_a-108.pdf?msclkid=45a0e506c7f611ecad177ad1de1c33fa" target="_blank" rel="noopener noreferrer">**OMB Circular A-108, Federal Agency Responsibilities for Review, Reporting, and Publication under the Privacy Act**</a> (December 2016)<br/>
> This circular describes agency responsibilities for implementing the review, reporting, and publication requirements of the Privacy Act of 1974 and related OMB policies.
<a href="https://obamawhitehouse.archives.gov/sites/default/files/omb/assets/OMB/circulars/a130/a130revised.pdf?msclkid=b1259175c7f211ec8144311a36ca5067" target="_blank" rel="noopener noreferrer">**Circular A-130: Managing Federal Information as a Strategic Resource**</a> (PDF, July 2016)<br/>
> Information and IT resources are critical to the U.S. social, political, and economic well-being. They enable the federal government to provide quality services to citizens, generate and disseminate knowledge, and facilitate greater productivity and advancement as a nation. It is important for the federal government to maximize the quality and security of federal information systems and to develop and implement uniform and consistent information resources management policies in order to inform the public and improve the productivity, efficiency, and effectiveness of agency programs. Additionally, as technology evolves, it is important that agencies manage information systems in a way that addresses and mitigates security and privacy risks associated with new IT resources and new information processing capabilities.
<a href="https://obamawhitehouse.archives.gov/sites/default/files/omb/memoranda/2016/m-16-17.pdf?msclkid=89a7abddc7f811ec9e7f926ad72d3be3" target="_blank" rel="noopener noreferrer">**M-16-17: OMB Circular A-123: Management’s Responsibility for Enterprise Risk Management (ERM) and Internal Control**</a> (July 2016)<br/>
> The policy changes in this circular modernize existing efforts by requiring agencies to implement an ERM capability coordinated with the strategic planning and strategic review process established by the Government Performance and Results Act Modernization Act (GPRAMA) and the internal control processes required by the Federal Managers' Financial Integrity Act (FMFIA) and the Government Accountability Office (GAO)'s Green Book. This integrated governance structure will improve mission delivery, reduce costs, and focus corrective actions toward key risks.
<a href="https://obamawhitehouse.archives.gov/sites/default/files/omb/memoranda/2015/m-15-13.pdf" target="_blank" rel="noopener noreferrer">**M-15-13: Policy to Require Secure Connections Across Federal Websites and Web Services**</a> (PDF, June 2015)<br/>
> OMB M-15-13 calls for “all publicly accessible Federal websites and web services” to only provide service through a secure connection (Hypertext Transfer Protocol Secure; HTTPS) and to use [HTTP Strict Transport Security (HSTS)](https://https.cio.gov/hsts/){:target="_blank"}{:rel="noopener noreferrer"} to ensure this. The requirement applies to all public domains and subdomains operated by the federal government, regardless of the domain suffix, as long as they are reachable over HTTP/HTTPS on the public internet. The [Compliance Guide: HTTPS-Only Standard](https://https.cio.gov/guide/#are-federally-operated-certificate-revocation-services-crl-ocsp-also-required-to-move-to-https){:target="_blank"}{:rel="noopener noreferrer"} provides implementation guidance from the White House Office of Management and Budget for agencies as they manage their transition to HTTPS.
<a href="https://www.gpo.gov/fdsys/pkg/FR-2014-10-23/pdf/2014-25439.pdf" target="_blank" rel="noopener noreferrer">**Executive Order 13681: Improving the Security of Consumer Financial Transactions**</a> (PDF, October 2014)<br/>
> This executive order requires agencies to strengthen the security of consumer data and encourage the adoption of enhanced safeguards nationwide in a manner that protects privacy and confidentiality while maintaining an efficient and innovative financial system.
<a href="https://www.opm.gov/investigations/suitability-executive-agent/policy/final-credentialing-standards.pdf" target="_blank" rel="noopener noreferrer">**Final Credentialing Standards for Issuing Personal Identity Verification (PIV) Cards under HSPD-12**</a> (PDF, July 2008)<br/>
> This memorandum provides final government-wide credentialing standards to be used by all federal departments and agencies in determining whether to issue or revoke PIV credentials to their employees and contractor personnel, including those who are non-United States citizens.
<a href="https://georgewbush-whitehouse.archives.gov/omb/memoranda/fy2005/m05-24.pdf?msclkid=c536f001c7f811ecaed4fea27a3c8d47" target="_blank" rel="noopener noreferrer">**M-05-24: Implementation of HSPD-12 Policy for a Common Identification Standard for Federal Employees and Contractors**</a> (PDF, August 2005)<br/>
> This memorandum provides implementation instructions for HSPD-12 and Federal Information Processing Standards (FIPS) 201.
<a href="http://www.dhs.gov/homeland-security-presidential-directive-12" target="_blank" rel="noopener noreferrer">**HSPD-12: Policy for a Common Identification Standard for Federal Employees and Contractors**</a> (August 2004)<br/>
> HSPD-12 calls for a mandatory, government-wide standard for secure and reliable forms of identification issued by the federal government to its employees and employees of federal contractors for access to federally controlled facilities and networks. -->


<ul class="gsa-expand-collapse-group" title="Expand or Collapse All" aria-label="Expand or Collapse All">
<li class="gsa-collapse-button" onclick="collapseToggle()" title="Collapse All" aria-label="Collapse All"> - </li>
<li class="gsa-expand-button" onclick="expandToggle()" title="Expand All" aria-label="Expand All"> + </li>
</ul>
{% assign lcount = 0 %}
{% for policy in site.data.policies %}
<div class="usa-accordion usa-accordion--bordered">
<h4 class="usa-accordion__heading">
<button type="button" class="usa-accordion__button gsa-normal-text" aria-expanded="{{policy.expanded}}" aria-controls="gsa-{{forloop.index}}">
<button type="button" class="usa-accordion__button gsa-normal-text gsa-target-accordion-header" aria-expanded="{{policy.expanded}}" aria-controls="gsa-{{forloop.index}}">
{{policy.name}} ({{policy.pubdate}})
</button>
</h4>
<div id="gsa-{{forloop.index}}" class="usa-accordion__content usa-prose">
<div id="gsa-{{forloop.index}}" class="usa-accordion__content usa-prose gsa-target-accordion-content-area">
<p>
<div class="display-flex flex-column flex-align-end">
<span class="usa-tag">{{policy.doctype}}</span>
Expand Down
Loading

0 comments on commit e90cc9c

Please sign in to comment.