2016 January 20 Archive - EXEIdeas – Let's Your Mind Rock

Web Designing is trending now a days so many people are trying to make their own web or blogs in awesome because web designing effect SEO too as to decrease loading time, increasing CTR and a lot of other restaurant of SEO depends upon your Web Designing so you should have a view on your Wev Design too. Their are so many snippets, widgets and codes depends upon your Web Designing and one from them is Multi Tab Widget.Multi Tab Widget is a most important widget in Web Designing to show your more contecnt in less place on user demand so you can show more and more data on your little size Web Page using Multi Tab Widget. Their are many Multi Tab Widget available over internet but some of them are using JQuery, Some are using CSS3 and some have JavaScript but too heavy so you have to use Multi Tab Widget but in less size to save your SEO too. So here we have a little size less coded Multi Tab Widget that is cross browser too.CLICK HERE TO SEE DEMOFeatures:1.) Pure JavaScript Added.2.) No Extra Code File Required.3.) CSS Added.4.) Simple And Fast Loading Code.5.) Can Work With Any Browser.6.) Different Color On Active Tab7.) Stylish And Awesome In Design.8.) Little And Short Code.9.) Can Work Inside Post.10.) Can All More Tabs.How To Add In A WebPage?1.) Just Go To Your “Web Page File”.2.) Now “Copy” The Below Codes And “Paste” It To There Positions.3.) “Save” It, Now You Are Done.CSS: #sel1{background:#2299DD} #sel2{background:#232323} #sel3{background:#232323} #sel1, #sel2, #sel3{cursor:pointer;border-bottom:5px solid #2299DD;color:#FFFFFF;float:left;width:33.33%;text-align:center;padding:12px 0;font-family:sans-serif;font-weight:bold;} #resultsel1, #resultsel2, #resultsel3{display:block;clear:both;width:100%;background:#F7F7F7;font-size:16px;font-family:sans-serif;padding:10px;} #resultsel1{display:block;} #resultsel2{display:none;} #resultsel3{display:none;} JavaScript: var selected="sel1"; var disp="resultsel1"; function show(a,b) { document.getElementById(selected).style.backgroundColor = "#232323"; document.getElementById(disp).style.display = "none"; document.getElementById(a).style.backgroundColor = "#2299DD"; document.getElementById(b).style.display = "block"; selected=a; disp=b; } HTML: Tab 1 Tab 1 Tab 1 Your Unlimited Data For Tab 1 That Will Be Visible On Load And Upper "Tab 1" Button Will Be Active. Your Unlimited Data For Tab 2 That Will Be Visible On CLick And Upper "Tab 2" Button Will Be Active. Your Unlimited Data For Tab 3 That Will Be Visible On CLick And Upper "Tab 3" Button Will Be Active. Customization:1.) Edit Your HTML As Per Your Requirements. Rest JavaScript Is Ok For General Us. If You Are Pro, Then You Can Do Any Thing.Last Words:That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…