This is another template of a web form with animated navigational tabs, designed using CSS and HTML. The buttons take an underlining action in hover and click events. Bootstrap styles have been imported to the code. The Li element of lists has been used to display the buttons in a list and the element tab panel has been used to avoid styling more than one tab at a time. The tabs have been given the styles of padding as 10px, font size as 20px, font-weight as 600, color as #293241, text-transform as uppercase to automatically transform it to uppercase, background as transparent, and position as relative. The tabs take an underlining effect with the color #727cb6 in a clicked and hover event with a transition value of all 0.3s ease 0s whereas the tab content section has the styles of padding as 15px and 20px, font size as 17px, letter-spacing as 1px, line-height as 30px, background color as #727cb6, and font color as #fff.

Tab style 2

4.3.1
This is a template of a web form that consists of section selection buttons with animations, designed using CSS and HTML. The buttons take a highlight action in a hover and click events. Bootstrap styles have been imported to the code. The Li element of lists has been used to display the buttons in a list and the element tab panel has been used to avoid styling more than one tab at a time. The tabs have been given the styles of padding as 10px and 20px, font size as 17px, font-weight as 600, color as #293241, text-transform as uppercase to automatically transform it to uppercase, background as transparent, and position as relative. The tabs take the light pink color of #ed5551 in a clicked and hover event with a transition value of all 0.3s ease 0s. The tab content section has the styles of padding as 30px, font size as 17px, letter-spacing as 1px, line-height as 30px, and font color as #293241.

Tab style 1

4.3.1
This is best suited for a site on smaller devices. The accordion is seen in smaller screens, whereas the tabs are seen in larger screens. HTML is simple with the ordered list set in the tags. The CSS styling is set for each tag which gives a tab and accordion view as per the screens used to view the page. This behavior is given due to the CSS styling and javascript. The javascript takes care of activating and deactivating the tabs once click. It also gives an accordion kind of look by adding the active class when needed. The script is carefully written to enhance the responsive behavior in smaller screens. Display for smaller screens is taken by CSS file using @media screens. Each and every file has a responsibility well divided to make this snippet function. You can use this snippet for mobile applications.
This is an excellent example of the accordion with “expand all and collapse all” button. The HTML is simple with the bootstrap accordion with the panel and data-toggling behavior defined. The CSS defined the styles for each tag, check out the “:: after” selector tag, which selects the panel-default and panel-heading and add the given styles after they are selected. Notice the change in the expandable button which is at the right of accordion, once clicked it rotates 180deg, this styling is done using CSS for aria-expended. This indicates the state of the collapsible element. This aria-expanded can be used with menus or list or any other collapsible items. The expand all and collapsible all button work using javascript. Check out the functions which open up all the accordion when clicked on "expand all" and "close all" when clicked on close all accordion. Use this to your website with large content and paragraphs.