Common JavaScript + jQuery components

A video series and code examples showing you how to make a bunch of common website components.


Components

There are a bunch of common components used on websites, so here are some tutorials on making basic versions.

Toggle panels

Toggle panels are small elements that can be opened and closed—exactly like the <details> element.

Tabs

Tabs are similar to toggle panels, except that there are many buttons and many connected panels.

A lightbox is a popup display, often for enlarging information, like images.

Data filter

Looks at using a <select> element to picking specific pieces of information out of an array and to display.


Video list

  1. JavaScript + jQuery components: toggle panels
  2. JavaScript + jQuery components: tabs
  3. JavaScript + jQuery components: lightbox
  4. JavaScript + jQuery components: lightbox data
  5. JavaScript + jQuery components: data filter