From a967b463f0be37b7366e396a965f1ac7ee790906 Mon Sep 17 00:00:00 2001 From: sarahmwong Date: Wed, 14 Aug 2024 09:54:20 +0100 Subject: [PATCH 1/7] update run_example to feature accordions --- R/run_example.R | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/R/run_example.R b/R/run_example.R index 894d980..11ed1bd 100644 --- a/R/run_example.R +++ b/R/run_example.R @@ -134,7 +134,7 @@ run_example <- function(){ #####################Create third panel################################ shiny::tabPanel( - "Tables and tabs", + "Tables, tabs and accordions", value = "panel3", gov_layout( size = "two-thirds", @@ -148,6 +148,20 @@ run_example <- function(){ width_overwrite = c("one-half", "one-quarter", "one-quarter")), heading_text("govTabs", size = "s"), shinyGovstyle::govTabs("tabsID", data, "tabs"), + heading_text("accordions", size = "s"), + shinyGovstyle:: accordion( + "acc1", + c("Writing well for the web", + "Writing well for specialists", + "Know your audience", + "How people read" + ), + c("This is the content for Writing well for the web.", + "This is the content for Writing well for specialists.", + "This is the content for Know your audience.", + "This is the content for How people read." + )), + heading_text("button_Input", size = "s"), button_Input("btn4", "Go to next page"), ) From a10b6f59dddb846ad03f34a2f99d35723c595b65 Mon Sep 17 00:00:00 2001 From: sarahmwong Date: Wed, 14 Aug 2024 10:29:07 +0100 Subject: [PATCH 2/7] get accordions working (kind of) and add in css changes to manual file. Still think this is quite buggy though - opening one tab then hitting 'show all' closes the one open tab instead of leaving it open --- css_changes.md | 21 ++-- inst/www/css/govuk-frontend-norem.css | 147 +++++++++++++------------- 2 files changed, 82 insertions(+), 86 deletions(-) diff --git a/css_changes.md b/css_changes.md index 1a02ad7..7f0af76 100644 --- a/css_changes.md +++ b/css_changes.md @@ -26,22 +26,13 @@ color: #0b0c0c; * Move fonts css to the font css * Change url links -* For accordion need to fix the norem by: -``` -.js-enabled .govuk-accordion-nav__chevron { - width: 20px; - height: 20px; - border: 1px solid; - -.js-enabled .govuk-accordion-nav__chevron:after{ - bottom: 5px; - left: 6px; - width: 6px; - height: 6px; - border-top: 2px solid; - border-right: 2px solid -} +* For accordion need to fix the css by: + Finding and replacing all `.govuk-frontend-supported .govuk-accordion` with `.js-enabled .govuk-accordion` + + and adding this chunk to the accordion section of css: + +``` .js-enabled .govuk-accordion__section-toggle { pointer-events: none; } diff --git a/inst/www/css/govuk-frontend-norem.css b/inst/www/css/govuk-frontend-norem.css index 3973f80..e69e730 100644 --- a/inst/www/css/govuk-frontend-norem.css +++ b/inst/www/css/govuk-frontend-norem.css @@ -1180,43 +1180,43 @@ margin-bottom: 0 } -.govuk-frontend-supported .govuk-accordion { +.js-enabled .govuk-accordion { border-bottom: 1px solid #b1b4b6 } -.govuk-frontend-supported .govuk-accordion__section { +.js-enabled .govuk-accordion__section { padding-top: 0 } -.govuk-frontend-supported .govuk-accordion__section-content { +.js-enabled .govuk-accordion__section-content { display: none; padding-top: 15px; padding-bottom: 30px } @media (min-width:40.0625em) { - .govuk-frontend-supported .govuk-accordion__section-content { + .js-enabled .govuk-accordion__section-content { padding-bottom: 50px } } -.govuk-frontend-supported .govuk-accordion__section-content[hidden] { +.js-enabled .govuk-accordion__section-content[hidden] { padding-top: 0; padding-bottom: 0 } @supports (content-visibility:hidden) { - .govuk-frontend-supported .govuk-accordion__section-content[hidden] { + .js-enabled .govuk-accordion__section-content[hidden] { content-visibility: hidden; display: inherit } } -.govuk-frontend-supported .govuk-accordion__section--expanded .govuk-accordion__section-content { +.js-enabled .govuk-accordion__section--expanded .govuk-accordion__section-content { display: block } -.govuk-frontend-supported .govuk-accordion__show-all { +.js-enabled .govuk-accordion__show-all { font-family: GDS Transport, arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -1235,56 +1235,56 @@ } @media print { - .govuk-frontend-supported .govuk-accordion__show-all { + .js-enabled .govuk-accordion__show-all { font-family: sans-serif } } @media (min-width:40.0625em) { - .govuk-frontend-supported .govuk-accordion__show-all { + .js-enabled .govuk-accordion__show-all { font-size: 1.1875rem; line-height: 1.3157894737 } } @media print { - .govuk-frontend-supported .govuk-accordion__show-all { + .js-enabled .govuk-accordion__show-all { font-size: 14pt; line-height: 1.15 } } @media (min-width:40.0625em) { - .govuk-frontend-supported .govuk-accordion__show-all { + .js-enabled .govuk-accordion__show-all { margin-bottom: 14px } } -.govuk-frontend-supported .govuk-accordion__show-all::-moz-focus-inner { +.js-enabled .govuk-accordion__show-all::-moz-focus-inner { padding: 0; border: 0 } -.govuk-frontend-supported .govuk-accordion__show-all:hover { +.js-enabled .govuk-accordion__show-all:hover { color: #0b0c0c; background: #f3f2f1; box-shadow: 0 -2px #f3f2f1, 0 4px #f3f2f1 } -.govuk-frontend-supported .govuk-accordion__show-all:hover .govuk-accordion__section-toggle-text { +.js-enabled .govuk-accordion__show-all:hover .govuk-accordion__section-toggle-text { color: #0b0c0c } -.govuk-frontend-supported .govuk-accordion__show-all:hover .govuk-accordion-nav__chevron { +.js-enabled .govuk-accordion__show-all:hover .govuk-accordion-nav__chevron { color: #0b0c0c; background: #0b0c0c } -.govuk-frontend-supported .govuk-accordion__show-all:hover .govuk-accordion-nav__chevron:after { +.js-enabled .govuk-accordion__show-all:hover .govuk-accordion-nav__chevron:after { color: #f3f2f1 } -.govuk-frontend-supported .govuk-accordion__show-all:focus { +.js-enabled .govuk-accordion__show-all:focus { outline: 3px solid transparent; color: #0b0c0c; background-color: #fd0; @@ -1294,19 +1294,19 @@ box-decoration-break: clone } -.govuk-frontend-supported .govuk-accordion__show-all:focus .govuk-accordion-nav__chevron { +.js-enabled .govuk-accordion__show-all:focus .govuk-accordion-nav__chevron { background: #0b0c0c } -.govuk-frontend-supported .govuk-accordion__show-all:focus .govuk-accordion-nav__chevron:after { +.js-enabled .govuk-accordion__show-all:focus .govuk-accordion-nav__chevron:after { color: #fd0 } -.govuk-frontend-supported .govuk-accordion__section-heading { +.js-enabled .govuk-accordion__section-heading { padding: 0 } -.govuk-frontend-supported .govuk-accordion-nav__chevron { +.js-enabled .govuk-accordion-nav__chevron { box-sizing: border-box; display: inline-block; position: relative; @@ -1317,7 +1317,7 @@ vertical-align: middle } -.govuk-frontend-supported .govuk-accordion-nav__chevron:after { +.js-enabled .govuk-accordion-nav__chevron:after { content: ""; box-sizing: border-box; display: block; @@ -1331,11 +1331,11 @@ border-right: .125rem solid } -.govuk-frontend-supported .govuk-accordion-nav__chevron--down { +.js-enabled .govuk-accordion-nav__chevron--down { transform: rotate(180deg) } -.govuk-frontend-supported .govuk-accordion__section-button { +.js-enabled .govuk-accordion__section-button { width: 100%; padding: 10px 0 0; border: 0; @@ -1348,42 +1348,47 @@ -webkit-appearance: none } +.js-enabled .govuk-accordion__section-toggle { + pointer-events: none; +} + + @media (min-width:40.0625em) { - .govuk-frontend-supported .govuk-accordion__section-button { + .js-enabled .govuk-accordion__section-button { padding-bottom: 10px } } -.govuk-frontend-supported .govuk-accordion__section-button:active { +.js-enabled .govuk-accordion__section-button:active { color: #0b0c0c; background: none } -.govuk-frontend-supported .govuk-accordion__section-button:hover { +.js-enabled .govuk-accordion__section-button:hover { color: #0b0c0c; background: #f3f2f1 } -.govuk-frontend-supported .govuk-accordion__section-button:hover .govuk-accordion__section-toggle-text { +.js-enabled .govuk-accordion__section-button:hover .govuk-accordion__section-toggle-text { color: #0b0c0c } -.govuk-frontend-supported .govuk-accordion__section-button:hover .govuk-accordion-nav__chevron { +.js-enabled .govuk-accordion__section-button:hover .govuk-accordion-nav__chevron { color: #0b0c0c; background: #0b0c0c } -.govuk-frontend-supported .govuk-accordion__section-button:hover .govuk-accordion-nav__chevron:after { +.js-enabled .govuk-accordion__section-button:hover .govuk-accordion-nav__chevron:after { color: #f3f2f1 } -.govuk-frontend-supported .govuk-accordion__section-button:focus { +.js-enabled .govuk-accordion__section-button:focus { outline: 0 } -.govuk-frontend-supported .govuk-accordion__section-button:focus .govuk-accordion__section-heading-text-focus, -.govuk-frontend-supported .govuk-accordion__section-button:focus .govuk-accordion__section-summary-focus, -.govuk-frontend-supported .govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus { +.js-enabled .govuk-accordion__section-button:focus .govuk-accordion__section-heading-text-focus, +.js-enabled .govuk-accordion__section-button:focus .govuk-accordion__section-summary-focus, +.js-enabled .govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus { outline: 3px solid transparent; color: #0b0c0c; background-color: #fd0; @@ -1393,61 +1398,61 @@ box-decoration-break: clone } -.govuk-frontend-supported .govuk-accordion__section-button:focus .govuk-accordion-nav__chevron { +.js-enabled .govuk-accordion__section-button:focus .govuk-accordion-nav__chevron { color: #0b0c0c; background: #0b0c0c } -.govuk-frontend-supported .govuk-accordion__section-button:focus .govuk-accordion-nav__chevron:after { +.js-enabled .govuk-accordion__section-button:focus .govuk-accordion-nav__chevron:after { color: #fd0 } -.govuk-frontend-supported .govuk-accordion__section-button::-moz-focus-inner { +.js-enabled .govuk-accordion__section-button::-moz-focus-inner { padding: 0; border: 0 } -.govuk-frontend-supported .govuk-accordion__section--expanded .govuk-accordion__section-button { +.js-enabled .govuk-accordion__section--expanded .govuk-accordion__section-button { padding-bottom: 15px; border-bottom: 0 } @media (min-width:40.0625em) { - .govuk-frontend-supported .govuk-accordion__section--expanded .govuk-accordion__section-button { + .js-enabled .govuk-accordion__section--expanded .govuk-accordion__section-button { padding-bottom: 20px } } -.govuk-frontend-supported .govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus { +.js-enabled .govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus { padding-bottom: 3px } @media (min-width:48.0625em) { - .govuk-frontend-supported .govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus { + .js-enabled .govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus { padding-bottom: 2px } } -.govuk-frontend-supported .govuk-accordion__section-heading-text, -.govuk-frontend-supported .govuk-accordion__section-summary, -.govuk-frontend-supported .govuk-accordion__section-toggle { +.js-enabled .govuk-accordion__section-heading-text, +.js-enabled .govuk-accordion__section-summary, +.js-enabled .govuk-accordion__section-toggle { display: block; margin-bottom: 13px } -.govuk-frontend-supported .govuk-accordion__section-heading-text .govuk-accordion__section-heading-text-focus, -.govuk-frontend-supported .govuk-accordion__section-heading-text .govuk-accordion__section-summary-focus, -.govuk-frontend-supported .govuk-accordion__section-heading-text .govuk-accordion__section-toggle-focus, -.govuk-frontend-supported .govuk-accordion__section-summary .govuk-accordion__section-heading-text-focus, -.govuk-frontend-supported .govuk-accordion__section-summary .govuk-accordion__section-summary-focus, -.govuk-frontend-supported .govuk-accordion__section-summary .govuk-accordion__section-toggle-focus, -.govuk-frontend-supported .govuk-accordion__section-toggle .govuk-accordion__section-heading-text-focus, -.govuk-frontend-supported .govuk-accordion__section-toggle .govuk-accordion__section-summary-focus, -.govuk-frontend-supported .govuk-accordion__section-toggle .govuk-accordion__section-toggle-focus { +.js-enabled .govuk-accordion__section-heading-text .govuk-accordion__section-heading-text-focus, +.js-enabled .govuk-accordion__section-heading-text .govuk-accordion__section-summary-focus, +.js-enabled .govuk-accordion__section-heading-text .govuk-accordion__section-toggle-focus, +.js-enabled .govuk-accordion__section-summary .govuk-accordion__section-heading-text-focus, +.js-enabled .govuk-accordion__section-summary .govuk-accordion__section-summary-focus, +.js-enabled .govuk-accordion__section-summary .govuk-accordion__section-toggle-focus, +.js-enabled .govuk-accordion__section-toggle .govuk-accordion__section-heading-text-focus, +.js-enabled .govuk-accordion__section-toggle .govuk-accordion__section-summary-focus, +.js-enabled .govuk-accordion__section-toggle .govuk-accordion__section-toggle-focus { display: inline } -.govuk-frontend-supported .govuk-accordion__section-toggle { +.js-enabled .govuk-accordion__section-toggle { font-size: 1rem; line-height: 1.25; font-weight: 400; @@ -1455,52 +1460,52 @@ } @media (min-width:40.0625em) { - .govuk-frontend-supported .govuk-accordion__section-toggle { + .js-enabled .govuk-accordion__section-toggle { font-size: 1.1875rem; line-height: 1.3157894737 } } @media print { - .govuk-frontend-supported .govuk-accordion__section-toggle { + .js-enabled .govuk-accordion__section-toggle { font-size: 14pt; line-height: 1.15 } } -.govuk-frontend-supported .govuk-accordion__section-toggle-text, -.govuk-frontend-supported .govuk-accordion__show-all-text { +.js-enabled .govuk-accordion__section-toggle-text, +.js-enabled .govuk-accordion__show-all-text { margin-left: 5px; vertical-align: middle } @media screen and (forced-colors:active) { - .govuk-frontend-supported .govuk-accordion__section-button:hover .govuk-accordion-nav__chevron, - .govuk-frontend-supported .govuk-accordion__show-all:hover .govuk-accordion-nav__chevron { + .js-enabled .govuk-accordion__section-button:hover .govuk-accordion-nav__chevron, + .js-enabled .govuk-accordion__show-all:hover .govuk-accordion-nav__chevron { background-color: transparent } - .govuk-frontend-supported .govuk-accordion__section-button:focus .govuk-accordion-nav__chevron, - .govuk-frontend-supported .govuk-accordion__section-button:focus .govuk-accordion__section-heading-text-focus, - .govuk-frontend-supported .govuk-accordion__section-button:focus .govuk-accordion__section-summary-focus, - .govuk-frontend-supported .govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus, - .govuk-frontend-supported .govuk-accordion__show-all:focus .govuk-accordion-nav__chevron, - .govuk-frontend-supported .govuk-accordion__show-all:focus .govuk-accordion__section-heading-text-focus, - .govuk-frontend-supported .govuk-accordion__show-all:focus .govuk-accordion__section-summary-focus, - .govuk-frontend-supported .govuk-accordion__show-all:focus .govuk-accordion__section-toggle-focus { + .js-enabled .govuk-accordion__section-button:focus .govuk-accordion-nav__chevron, + .js-enabled .govuk-accordion__section-button:focus .govuk-accordion__section-heading-text-focus, + .js-enabled .govuk-accordion__section-button:focus .govuk-accordion__section-summary-focus, + .js-enabled .govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus, + .js-enabled .govuk-accordion__show-all:focus .govuk-accordion-nav__chevron, + .js-enabled .govuk-accordion__show-all:focus .govuk-accordion__section-heading-text-focus, + .js-enabled .govuk-accordion__show-all:focus .govuk-accordion__section-summary-focus, + .js-enabled .govuk-accordion__show-all:focus .govuk-accordion__section-toggle-focus { background: transparent; background-color: transparent } } @media (hover:none) { - .govuk-frontend-supported .govuk-accordion__section-header:hover { + .js-enabled .govuk-accordion__section-header:hover { border-top-color: #b1b4b6; box-shadow: inset 0 3px 0 0 #1d70b8 } - .govuk-frontend-supported .govuk-accordion__section-header:hover .govuk-accordion__section-button { + .js-enabled .govuk-accordion__section-header:hover .govuk-accordion__section-button { border-top-color: #b1b4b6 } } From 8c753e9a34a3aa76a4a8d1e0f3bacce52b2eaf2a Mon Sep 17 00:00:00 2001 From: jenisayshi <166698885+jenisayshi@users.noreply.github.com> Date: Thu, 15 Aug 2024 10:52:02 +0100 Subject: [PATCH 3/7] fix show all sections --- R/accordion.R | 1 + inst/www/js/accordion.js | 22 ++++++++++++++++++---- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/R/accordion.R b/R/accordion.R index 5a78c31..857bab7 100644 --- a/R/accordion.R +++ b/R/accordion.R @@ -54,6 +54,7 @@ accordion <- function(inputId, titles, descriptions){ class = "govuk-accordion__show-all", `aria-expanded` = "false", shiny::tags$span( + id="show-all-chevron", class=paste( "govuk-accordion-nav__chevron", "govuk-accordion-nav__chevron--down"), diff --git a/inst/www/js/accordion.js b/inst/www/js/accordion.js index 6f4c7cb..2663ca5 100644 --- a/inst/www/js/accordion.js +++ b/inst/www/js/accordion.js @@ -20,18 +20,32 @@ $(document).on('click', '.govuk-accordion__show-all', function(e) { var sections = document.getElementsByClassName('govuk-accordion__section'); var chevrons = document.getElementsByClassName('govuk-accordion-nav__chevron'); + var show_all_chevron_class = document.getElementById("show-all-chevron").classList.value; - for(var i=0; i< sections.length; i++){ - if(sections[i].classList.value == "govuk-accordion__section") { + +for(var i=0; i< sections.length; i++){ + + if(show_all_chevron_class != "govuk-accordion-nav__chevron"){ + + if(sections[i].classList.value == "govuk-accordion__section") { sections[i].classList.add("govuk-accordion__section--expanded"); chevrons[i].classList.remove("govuk-accordion-nav__chevron--down"); - } else { + + } + + + } else { + + if(sections[i].classList.value != "govuk-accordion__section") { sections[i].classList.remove("govuk-accordion__section--expanded"); chevrons[i].classList.add("govuk-accordion-nav__chevron--down"); + } - console.log(chevrons[i].classList.value); + } +} + }); From d63fb7e0ae771d2a83857eeb784e46bd01691234 Mon Sep 17 00:00:00 2001 From: jenisayshi <166698885+jenisayshi@users.noreply.github.com> Date: Thu, 15 Aug 2024 12:30:27 +0100 Subject: [PATCH 4/7] add Hide/Show --- inst/www/js/accordion.js | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/inst/www/js/accordion.js b/inst/www/js/accordion.js index 2663ca5..420ed06 100644 --- a/inst/www/js/accordion.js +++ b/inst/www/js/accordion.js @@ -5,12 +5,21 @@ $(document).on('click', '.govuk-accordion__section-button', function(e) { var cur_class = $('[name="accordion-default-heading-' + level + '"]').parent().parent().parent()[0].classList.value + + if(cur_class == "govuk-accordion__section") { $('[name="accordion-default-heading-' + level + '"]').parent().parent().parent().addClass("govuk-accordion__section--expanded"); $('[name="accordion-default-heading-' + level + '"]').children().children().children().removeClass("govuk-accordion-nav__chevron--down")[0]; + + $('[name="accordion-default-heading-' + level + '"]').children().children().children()[1].innerHTML = "Hide" + } else { $('[name="accordion-default-heading-' + level + '"]').parent().parent().parent().removeClass("govuk-accordion__section--expanded"); $('[name="accordion-default-heading-' + level + '"]').children().children().children().addClass("govuk-accordion-nav__chevron--down")[0]; + + // if any section set to hidden want the show all section to show + document.getElementById("show-all-chevron").classList.add("govuk-accordion-nav__chevron--down") + $('[name="accordion-default-heading-' + level + '"]').children().children().children()[1].innerHTML = "Show" } }); @@ -20,6 +29,8 @@ $(document).on('click', '.govuk-accordion__show-all', function(e) { var sections = document.getElementsByClassName('govuk-accordion__section'); var chevrons = document.getElementsByClassName('govuk-accordion-nav__chevron'); + var toggle_text = document.getElementsByClassName('govuk-accordion__section-toggle-text'); + var show_all_chevron_class = document.getElementById("show-all-chevron").classList.value; @@ -27,18 +38,29 @@ for(var i=0; i< sections.length; i++){ if(show_all_chevron_class != "govuk-accordion-nav__chevron"){ + document.getElementsByClassName("govuk-accordion__show-all-text")[0].innerHTML = "Hide all sections"; + if(sections[i].classList.value == "govuk-accordion__section") { sections[i].classList.add("govuk-accordion__section--expanded"); - chevrons[i].classList.remove("govuk-accordion-nav__chevron--down"); + chevrons[i+1].classList.remove("govuk-accordion-nav__chevron--down"); + + chevrons[0].classList.remove("govuk-accordion-nav__chevron--down"); + toggle_text[i].innerHTML = "Hide"; } } else { + document.getElementsByClassName("govuk-accordion__show-all-text")[0].innerHTML = "Show all sections"; + if(sections[i].classList.value != "govuk-accordion__section") { sections[i].classList.remove("govuk-accordion__section--expanded"); - chevrons[i].classList.add("govuk-accordion-nav__chevron--down"); + chevrons[i+1].classList.add("govuk-accordion-nav__chevron--down"); + + chevrons[0].classList.add("govuk-accordion-nav__chevron--down"); + + toggle_text[i].innerHTML = "Show"; } From 2355729f785336e272592034d288a4b44774a487 Mon Sep 17 00:00:00 2001 From: jenisayshi <166698885+jenisayshi@users.noreply.github.com> Date: Thu, 15 Aug 2024 12:35:38 +0100 Subject: [PATCH 5/7] fix broken first section --- inst/www/js/accordion.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/inst/www/js/accordion.js b/inst/www/js/accordion.js index 420ed06..8af5f29 100644 --- a/inst/www/js/accordion.js +++ b/inst/www/js/accordion.js @@ -39,12 +39,13 @@ for(var i=0; i< sections.length; i++){ if(show_all_chevron_class != "govuk-accordion-nav__chevron"){ document.getElementsByClassName("govuk-accordion__show-all-text")[0].innerHTML = "Hide all sections"; + chevrons[0].classList.remove("govuk-accordion-nav__chevron--down"); if(sections[i].classList.value == "govuk-accordion__section") { sections[i].classList.add("govuk-accordion__section--expanded"); chevrons[i+1].classList.remove("govuk-accordion-nav__chevron--down"); - chevrons[0].classList.remove("govuk-accordion-nav__chevron--down"); + toggle_text[i].innerHTML = "Hide"; } @@ -53,13 +54,12 @@ for(var i=0; i< sections.length; i++){ } else { document.getElementsByClassName("govuk-accordion__show-all-text")[0].innerHTML = "Show all sections"; + chevrons[0].classList.add("govuk-accordion-nav__chevron--down"); if(sections[i].classList.value != "govuk-accordion__section") { sections[i].classList.remove("govuk-accordion__section--expanded"); chevrons[i+1].classList.add("govuk-accordion-nav__chevron--down"); - chevrons[0].classList.add("govuk-accordion-nav__chevron--down"); - toggle_text[i].innerHTML = "Show"; } From 0afdccd1590cff63d9c822ab337a4bf7c25eb14f Mon Sep 17 00:00:00 2001 From: sarahmwong Date: Thu, 15 Aug 2024 13:12:01 +0100 Subject: [PATCH 6/7] reformat in vs code --- inst/www/js/accordion.js | 46 ++++++++++++++++++++-------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/inst/www/js/accordion.js b/inst/www/js/accordion.js index 8af5f29..93b4dde 100644 --- a/inst/www/js/accordion.js +++ b/inst/www/js/accordion.js @@ -1,30 +1,30 @@ -$(document).on('click', '.govuk-accordion__section-button', function(e) { +$(document).on('click', '.govuk-accordion__section-button', function (e) { var str = e.target.name; - var level = str.substring(str.length-1); + var level = str.substring(str.length - 1); var cur_class = $('[name="accordion-default-heading-' + level + '"]').parent().parent().parent()[0].classList.value - if(cur_class == "govuk-accordion__section") { + if (cur_class == "govuk-accordion__section") { $('[name="accordion-default-heading-' + level + '"]').parent().parent().parent().addClass("govuk-accordion__section--expanded"); $('[name="accordion-default-heading-' + level + '"]').children().children().children().removeClass("govuk-accordion-nav__chevron--down")[0]; - $('[name="accordion-default-heading-' + level + '"]').children().children().children()[1].innerHTML = "Hide" + $('[name="accordion-default-heading-' + level + '"]').children().children().children()[1].innerHTML = "Hide" } else { $('[name="accordion-default-heading-' + level + '"]').parent().parent().parent().removeClass("govuk-accordion__section--expanded"); $('[name="accordion-default-heading-' + level + '"]').children().children().children().addClass("govuk-accordion-nav__chevron--down")[0]; // if any section set to hidden want the show all section to show - document.getElementById("show-all-chevron").classList.add("govuk-accordion-nav__chevron--down") - $('[name="accordion-default-heading-' + level + '"]').children().children().children()[1].innerHTML = "Show" + document.getElementById("show-all-chevron").classList.add("govuk-accordion-nav__chevron--down") + $('[name="accordion-default-heading-' + level + '"]').children().children().children()[1].innerHTML = "Show" } }); -$(document).on('click', '.govuk-accordion__show-all', function(e) { +$(document).on('click', '.govuk-accordion__show-all', function (e) { var sections = document.getElementsByClassName('govuk-accordion__section'); var chevrons = document.getElementsByClassName('govuk-accordion-nav__chevron'); @@ -34,40 +34,40 @@ $(document).on('click', '.govuk-accordion__show-all', function(e) { var show_all_chevron_class = document.getElementById("show-all-chevron").classList.value; -for(var i=0; i< sections.length; i++){ + for (var i = 0; i < sections.length; i++) { - if(show_all_chevron_class != "govuk-accordion-nav__chevron"){ + if (show_all_chevron_class != "govuk-accordion-nav__chevron") { document.getElementsByClassName("govuk-accordion__show-all-text")[0].innerHTML = "Hide all sections"; chevrons[0].classList.remove("govuk-accordion-nav__chevron--down"); - if(sections[i].classList.value == "govuk-accordion__section") { - sections[i].classList.add("govuk-accordion__section--expanded"); - chevrons[i+1].classList.remove("govuk-accordion-nav__chevron--down"); + if (sections[i].classList.value == "govuk-accordion__section") { + sections[i].classList.add("govuk-accordion__section--expanded"); + chevrons[i + 1].classList.remove("govuk-accordion-nav__chevron--down"); - toggle_text[i].innerHTML = "Hide"; + toggle_text[i].innerHTML = "Hide"; - } + } - } else { + } else { - document.getElementsByClassName("govuk-accordion__show-all-text")[0].innerHTML = "Show all sections"; - chevrons[0].classList.add("govuk-accordion-nav__chevron--down"); + document.getElementsByClassName("govuk-accordion__show-all-text")[0].innerHTML = "Show all sections"; + chevrons[0].classList.add("govuk-accordion-nav__chevron--down"); - if(sections[i].classList.value != "govuk-accordion__section") { - sections[i].classList.remove("govuk-accordion__section--expanded"); - chevrons[i+1].classList.add("govuk-accordion-nav__chevron--down"); + if (sections[i].classList.value != "govuk-accordion__section") { + sections[i].classList.remove("govuk-accordion__section--expanded"); + chevrons[i + 1].classList.add("govuk-accordion-nav__chevron--down"); - toggle_text[i].innerHTML = "Show"; + toggle_text[i].innerHTML = "Show"; + + } } } -} - }); From a662670b7a5294d2599ccec83be26310671c0f2c Mon Sep 17 00:00:00 2001 From: jenisayshi <166698885+jenisayshi@users.noreply.github.com> Date: Fri, 16 Aug 2024 09:01:23 +0100 Subject: [PATCH 7/7] add commets and add Show All text where any section is hidden --- inst/www/js/accordion.js | 37 +++++++++++++++++++++++++++++++++---- 1 file changed, 33 insertions(+), 4 deletions(-) diff --git a/inst/www/js/accordion.js b/inst/www/js/accordion.js index 93b4dde..1795d38 100644 --- a/inst/www/js/accordion.js +++ b/inst/www/js/accordion.js @@ -1,51 +1,79 @@ +// individual section buttons $(document).on('click', '.govuk-accordion__section-button', function (e) { + // get 'name' value from button var str = e.target.name; + + // get z value from name (Map argument) var level = str.substring(str.length - 1); + // get class from top div var cur_class = $('[name="accordion-default-heading-' + level + '"]').parent().parent().parent()[0].classList.value - + // check if "govuk-accordion__section--expanded" has already been added to the top div class if (cur_class == "govuk-accordion__section") { + + // add "govuk-accordion__section--expanded" to top div class $('[name="accordion-default-heading-' + level + '"]').parent().parent().parent().addClass("govuk-accordion__section--expanded"); + + // remove chevron transform class $('[name="accordion-default-heading-' + level + '"]').children().children().children().removeClass("govuk-accordion-nav__chevron--down")[0]; + // edit toggle text $('[name="accordion-default-heading-' + level + '"]').children().children().children()[1].innerHTML = "Hide" } else { + + // remove "govuk-accordion__section--expanded" to top div class $('[name="accordion-default-heading-' + level + '"]').parent().parent().parent().removeClass("govuk-accordion__section--expanded"); + + // add chevron transform class $('[name="accordion-default-heading-' + level + '"]').children().children().children().addClass("govuk-accordion-nav__chevron--down")[0]; - // if any section set to hidden want the show all section to show - document.getElementById("show-all-chevron").classList.add("govuk-accordion-nav__chevron--down") + // edit toggle text $('[name="accordion-default-heading-' + level + '"]').children().children().children()[1].innerHTML = "Show" + + // if any section set to hidden want "Show all text" and chevron down + document.getElementById("show-all-chevron").classList.add("govuk-accordion-nav__chevron--down") + document.getElementsByClassName("govuk-accordion__show-all-text")[0].innerHTML = "Show all sections" } }); +// show all button $(document).on('click', '.govuk-accordion__show-all', function (e) { + // get all section elements var sections = document.getElementsByClassName('govuk-accordion__section'); + + // get all chevron elements var chevrons = document.getElementsByClassName('govuk-accordion-nav__chevron'); + // get toggle text element var toggle_text = document.getElementsByClassName('govuk-accordion__section-toggle-text'); + // get current class value for the show all chevron var show_all_chevron_class = document.getElementById("show-all-chevron").classList.value; for (var i = 0; i < sections.length; i++) { + // check direction of Show all chevron if (show_all_chevron_class != "govuk-accordion-nav__chevron") { + // switch Show all text and chevon direction document.getElementsByClassName("govuk-accordion__show-all-text")[0].innerHTML = "Hide all sections"; chevrons[0].classList.remove("govuk-accordion-nav__chevron--down"); + // only switch individual sections if they are closed if (sections[i].classList.value == "govuk-accordion__section") { sections[i].classList.add("govuk-accordion__section--expanded"); - chevrons[i + 1].classList.remove("govuk-accordion-nav__chevron--down"); + // note: chevron elements length one greater than section length due to show all/hide all chevron + chevrons[i + 1].classList.remove("govuk-accordion-nav__chevron--down"); + // change individual section text to "Hide" toggle_text[i].innerHTML = "Hide"; } @@ -53,6 +81,7 @@ $(document).on('click', '.govuk-accordion__show-all', function (e) { } else { + // this else section does the opposite of the if section above document.getElementsByClassName("govuk-accordion__show-all-text")[0].innerHTML = "Show all sections"; chevrons[0].classList.add("govuk-accordion-nav__chevron--down");