Accordionized Embed (click me) +

  • Accordions are links that expand when you click on the title text (like this one.)
  • Unlike other links, they do not take you to a different page, it just shows content that is otherwise hidden.
  • If you click on them again, their content is hidden again. You can toggle back and forth to your hearts content.
  • Accordionizing is the best way to get a ton of info on the page without taking over the entire screen.

  • Embedding shows content from another web source on your site.
  • Think of it as a smaller screen on your page that shows a different page
  • The padlet page on our site is an embed: our site shows exactly what you would see if you viewed it from the padlet site.
  • Embedding is the most direct way to get content on our website. It displays created content instead of creating content to display.

  • Embedding Allows All Members to Create Site Content
  • Documents are created/edited/updated by the appropriate person
  • Documents are created with appropriate software (Google versions of Word, Powerpoint, etc.)
  • Organizing, archiving, and searching the drive is basic.
  • Content/format/edits/updates are controled by the content owner, not the webmaster.
  • I don't touch it, so I can't mess it up and I cannot lecture you about Oxford commas.
  • Webmaster can focus on webby things.

    Check out the embedded content below. Click on the accordionized examples to view the content.

    • Most documents on our club drive can be embedded. This page shows accordion and regular embedding. Embedding makes it much easier to make changes and accordions can get a lot more information on one screen (remember - almost no one scrolls down.)

    These three are in a single markdown box. It’s pretty compact but it’s a pain to edit. This can be prettier, but we should stick to one format.

    Accordion Embedded Doc +

    Publish document to the web and embed the link


  • Changes made in the original document flow through to the website.
  • The document is searchable and the links work.
  • Everything except text looks weird on the phone.
  • Fiddle with the width and height.
  • The width needs to be a percentage.
  • This example is 100%.
  • The scroll is automatic.


    • Accordion Embedded Spreadsheet +


  • Searchable, but not sortable
  • Links will work
  • The header row is an easy fix, but it's a bogus file and I don't want to mess around with it.
  • It's a spreadsheet. Spreadsheet haters gonna hate


    • Accordion Embedded Slide Show +


  • Accordian slide shows are not great and they cause loading hiccup
  • This is the slide format with the controls.
  • Making the size work for all devices is a pain
  • Just no

    • Smooshing Works

    If the underlying doc/slide/sheet/calendar is standard, they can be packed in horizontally. Clever formatting messes it up - especially docs. It is possible to have the accordion take up the entire screen, but it requires javascript and I don’t want to do it. There is a $50 plugin that will work much better.

    Smooshed Accordion Embedded Calendar +

    Smooshed Accordion Embedded Doc +


  • The text works. The table doesn't and the image sometimes works.
  • The width is 100%.
  • Not smooshed on a phone

    • Super Smooshed

    Possible, but silly.

    Smooshed Accordion Embedded Calendar +

    Smooshed Accordion Embedded Doc +


    Smooshed Accordion Embedded Slide Show +

  • The size can be better, but it will still look ridiculous.
  • No

    • Embedded Google Doc

    This has a border around the document. It looks weird when there is no border or background color - especially the scroll. The page width is complicated, but it works across devices. I like the accordian better.


    Embedded Google Spreadsheet - Plain

    Other than the directory, nothing else should be in this format. The directory has over 1000 bits of info, so it needs a spreadsheet.

    Google Spreadsheet Scroll - Green Box

    The color background looks better and makes it easier to understand. The sideways scroll can be fixed. If you don't need a spreadsheet, use a table. It's more work for the author, but it's much easier for the viewer.

    Color Palette

    an enormous pain

    dogwood red
    #db9c87
    darksalmon
    hsl(15,53%,69%)
    rgb(219,156,135)
    luminance: 0.40
    lighter dogwood red
    #f2c2b2
    darksalmon
    hsl(15,71%,82%)
    hsl(15,71%,82%)
    luminance: 0.60

    pale dogwood red

    hsl(15,71%,92%)

    potential red
    hsl(15,85%,40%)
    logo green
    #c3d57c
    hsl(72,51%,66%)
    rgb(195,213,124)
    luminance: 0.61
    darker logo green - used in folder background
    hsl(73, 30%, 54%)    9fdd86
    rgb(159, 173, 102)
    luminance: 0.39
    google blue text
    #6687ee
    cornflowerblue
    hsl(225,80%,66%)
    rgb(102,135,238)
    luminance: 0.26
    still curious

    still curious

    Accordion Embedded Spreadsheet +


  • Searchable, but not sortable
  • Links will work
  • The header row is an easy fix, but it's a bogus file and I don't want to mess around with it.
  • It's a spreadsheet. Spreadsheet haters gonna hate