Animated Info Window with SVG Icons Using CSS and jQuery | Side Tab

How we can create info tabs navigation using HTML CSS JS? solution: See this Animated Info Window with SVG Icons Using CSS and jQuery, Side Tab Navigations.

Previously I have shared some tabs program, this is a little bit similar to that but it is an info window program. Basically, an info window give is used to gives information to users, which can be links, text, images, etc. It generally looks like a tab program, because it contains navigations and according to click the content makes changes. This type of info window we can see in setting sections in social media like Facebook, Instagram, etc.

Today you will learn to create info windows with Side Tab Navigation.  Basically,  there are 4 navigations or sidebar links and 4 sections. Also, there are 4 icons based on pure SVG shapes. The icons are placed in sidebar links and also in sections, Both icons are the same used in two places. And the section contains the icon, a heading, and some texts. When you will click another navigation links then content will change and appear the content of the selected link.

So, Today I am sharing Animated Info Window with SVG Icons Using CSS and jQuery. There I have used SVG for creating the icons, CSS for styling and jQuery for functioning. If we don’t use SVG icons then this program will very easy to create and understand also. You can use this info window program on your website, it can be placed in fronted and backend also.

If you are thinking now how this info tab section actually is, then see the preview given below.

Preview Of Side Tab Navigation

See this video preview to getting an idea of how this info window navigation looks like.

https://webdevtrick.com/wp-content/uploads/info-tab-section.mp4?_=1

Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

You May Also Like:

• Flex Hover Slider
• Smart Fixed Navigation
• Frosted Glass Sideout Menu
• Horizontal Tab Menu

Animated Info Window with SVG Icons using CSS jQuery Source Code

Before sharing source code, let’s talk about it. First I have created the 4 SVG icons using path points and later I have placed in navigation and sections using <use xlink:href="#ID"></use> command method. After that, I have created the sections and navigations using the div element. Inside a single section, I have placed an icon, a heading, and some dummy text. Also in the HTML file, I have linked external files like CSS, JS, and jQuery CDN.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. With CSS I gave basic values to elements like size, position, margin, padding, etc. There I have used CSS transition command to create the animation effect. I also used the CSS @media query to fix size in some elements for a responsive design.

jQuery handling here the open and close toggle feature in this program. Basically, jQuery adding active to the section which is selected and removes the active class from left other sections. There I have used .click(function()) command to make changes on click and .removeClass & .addClass command to making changes.

Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First file for HTML, second file for CSS, and the third file for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

That’s It. Now you have successfully created Animated Info Window with SVG Icons Using CSS and jQuery, Side Tab Navigation Program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.