recentpopularlog in

piperh : accordion   12

How do you mark up an accordion? — Sara Soueidan – Freelance-Front-End UI/UX Developer
about the possible markup options for an accordion, with and without semantic elements, for best accessibility. Doesn't give script for the accordion itself, just says it would be js. Some useful resources at end
webdesign  web  design  accordion  markup  html  semantic  element  faq  resources  aria  accessibility  accessible 
september 2018 by piperh
Quick Reminder that Details/Summary is the Easiest Way Ever to Make an Accordion | CSS-Tricks
Very easy to get a fold out / drop down type text with native css. Check compatibility on caniuse. Not very stylable but almost zero work to achieve.
webdesign  web  design  css  accordion  effect  fold  out  details  summary 
april 2018 by piperh
Patterns - The A11Y Project
very handy code and script library for frequent actions and features: dropdowns, accordions, tabs, toggles, buttons, modals, tooltips and more.
webdesign  web  design  code  coding  js  javascript  script  toggle  modal  button  breadcrumb  aria  accessible  accessibility  pattern  menu  accordion  tab  tooltip  player 
november 2017 by piperh
handorgel
vanilla ES6, expanding accessible (a11y) drop down accordion for expand/contract texts. Options for open by default, only one div open at a time, and togglable/not togglable. Looks simple and neat
webdesign  web  design  accordion  slide  expand  expandable  accessibility  accessible  js  javascript  script  a11y  css  html  markup 
october 2017 by piperh
Designing The Perfect Accordion – Smashing Magazine
detailed look at design for expanding accordion menus and items, especially (I think) on mobile
webdesign  web  design  accordion  menu  expand  collapse  expanding  collapsing  slideout  ui  ux  show  hide  toggle 
june 2017 by piperh
Responsive pure CSS tabs & accordion
a flexbox method for css-only tabs. Uses checkbox hack
webdesign  web  design  css  layout  css-only  tabs  accordion  flex  flexbox 
november 2016 by piperh
Frend — A collection of accessible, modern front-end components.
they say: Frend components are modest and dependency-free. Keyboard navigable. Components use js but no external library
webdesign  web  design  code  coding  components  library  accessible  dependency-free  accordion  modal  off-canvas  tabs  tooltip  ui  js  javascript 
june 2016 by piperh
Accordion | jQuery UI
jQuery dependent accordion menu with various options.
accordion  expanding  expand  menu  content  jquery  script  responsive  webdesign  web  design 
april 2014 by piperh

Copy this bookmark:





to read