Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/john-doherty/seo-tabs
Simple SEO friendly tabs (1k of pure JS)
https://github.com/john-doherty/seo-tabs
javascript no-dependencies seo-friendly tabs vanilla-js
Last synced: about 4 hours ago
JSON representation
Simple SEO friendly tabs (1k of pure JS)
- Host: GitHub
- URL: https://github.com/john-doherty/seo-tabs
- Owner: john-doherty
- License: mit
- Created: 2020-11-06T08:27:44.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-11-26T23:54:46.000Z (almost 2 years ago)
- Last Synced: 2024-04-11T16:15:11.513Z (7 months ago)
- Topics: javascript, no-dependencies, seo-friendly, tabs, vanilla-js
- Language: JavaScript
- Homepage: https://orcascan.com/guides/how-to-connect-orca-scan-to-your-database-5d9695c8#how-do-i-create-a-lookup-url-for-my-system
- Size: 140 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# seo-tabs
Simple SEO friendly tabs _(1k of pure JS)_. Goals:
- [x] Keep it really f'kin simple
- [x] Minimal _(semantic)_ HTML
- [x] Intuitive markup
- [x] Set default tab without JS
- [x] SEO friendly _(crawlable + minimal js)_
- [x] 0 CSS conflicts _(uses HTML5 data-* attributes)_
- [x] Bookmarkable _(add `data-hashable="true"`)_
Try it :point_right: [orcascan.com](https://orcascan.com/guides/how-to-connect-orca-scan-to-your-database-5d9695c8#how-do-i-create-a-lookup-url-for-my-system)
## Usage
Add the [seo-tabs.min.js](dist/seo-tabs.min.js) and [seo-tabs.min.css](dist/seo-tabs.min.css) files to your page:
```html
```
Add the minimal, semantic markup for your tabs:
```html
```
Override default style using CSS:
```css
/* tap tops */
[data-seo-tabs="true"] [data-tabtop="true"] {
border: 1px solid #ccc;
border-bottom: 0;
}
[data-seo-tabs="true"] [data-tabtop="true"][data-active="true"] {
background: #ccc;
color: #333;
}
/* tab boxes */
[data-seo-tabs="true"] [data-tabbox="true"] {
background: #ccc;
border: 1px solid #ccc;
}
[data-seo-tabs="true"] [data-tabbox="true"][data-active="true"] {
background: #ccc;
}
```
The above code produces:
## Contributing
1. Fork it!
2. Create a branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :muscle:
### Development
The project includes everything you need to tweak, including a node webserver. Run the following:
```bash
git clone https://github.com/john-doherty/seo-tabs
cd seo-tabs
npm install
npm start
```
Then visit [http://localhost:8080](http://localhost:8080) in your browser.
### Update .min files
Update the minified files from source by increasing the version number in `package.json` and run the following:
```bash
npm run build
```
## Star the repo
If you use this useful please star the repo, it helps me prioritize which open source issues to tackle first.
## History
For change-log, check [releases](https://github.com/john-doherty/seo-tabs/releases).
## License
Licensed under [MIT License](LICENSE) © [John Doherty](https://twitter.com/mrjohndoherty)