# tag-explorer

A js library that creates a tag cloud that can filter articles additively by multiple tags.

## Stucture and styling

The following HTML is generated within `tagContainer`.

```html
<li>
  <div class="letter-header">A</div>
  <button>A title</button>
</li>
<li>
  <button>Another title</button>
</li>
<li>
  <div class="letter-header">N</div>
  <button>Next title</button>
</li>
```

Styles can be added rooted in `tagContainer`, for example:

```css
.tag-container { ... }
.tag-container li { ... }
.tag-container .letter-header { ... }
.tag-container button { ... }
```

# tag-explorer

A js library that creates a tag cloud that can filter articles additively by multiple tags.

## Multiple filters

tag-explorer allows multiple tags to be filtered on, 

## Stucture and styling

The following HTML is generated within `tagContainer`.

```html
<li>
  <div class="letter-header">A</div>
  <button>A title</button>
</li>
<li>
  <button>Another title</button>
</li>
<li>
  <div class="letter-header">N</div>
  <button>Next title</button>
</li>
```

Styles can be added rooted in `tagContainer`, for example:

```css
.tag-container { ... }
.tag-container li { ... }
.tag-container .letter-header { ... }
.tag-container button { ... }
```

### `.active` and `.selected`

When at least one button has been toggled, the `.selected` class is added to the button and `.active` is applied to all 'tag neighbours` which are tags that are also present in articles that contain all selected tags. With styling, this allows the user to narrow down the filter much easier.

Add active and selected documentation
Add active and selected documentation