Skip to content

matiev/js_tabs-auto-structure

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 

Repository files navigation

Javascript tabs, native

Automatic tabs for the site.

Possibility of creating an unlimited number of independent blocks with Tabs on the page.

Individual Tabs can be both horizontal and vertical, by adding CSS properties (.tab-3 and .tabs-3 > .tabs__list), uncommenting and changing the ordinal index on the page for tabs .tab-1, 2, etc...

Initial structure:

<div class="tabs__content"> 
  <div class="tabs__text" id="Testimonials">First some text</div>
  <div class="tabs__text" id="Tips">Second some text</div>
  <div class="tabs__text" id="View">Some text</div>
  <div class="tabs__text" id="Popular">New other text</div>
</div>

For each tab block:

Based on the initial structure, navigation is created, the text of the links is taken from the id. A parent tabs block is created with a unique index. The navigation and initial structure is placed in this parent tabs block.

In the initial structure, id can be called the same for different tabs, there will be no conflicts.

Structure at the end

```
First some text
Second some text
Some text
```