Skip to main content

Posts

Showing posts from March, 2017

how to create tabbed menu

Tabs Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects: <!DOCTYPE html> <html> <head> <style> body {font-family: "Lato", sans-serif;} /* Style the tab */ div.tab {     overflow: hidden;     border: 1px solid #ccc;     background-color: #f1f1f1; } /* Style the links inside the tab */ div.tab a {     float: left;     display: block;     color: black;     text-align: center;     padding: 14px 16px;     text-decoration: none;     transition: 0.3s;     font-size: 17px; } /* Change background color of links on hover */ div.tab a:hover {     background-color: #ddd; } /* Create an active/current tablink class */ div.tab a:focus, .active {     background-color: #ccc; } /* Style the tab content */ .tabcontent {     display: none;     padding: 6px 12px;     border: 1px solid #ccc;     border-top: none; } </style> </head> <body> <p

How to Create Accordion

Accordion: Accordions are useful when you want to toggle between hiding and showing large amount of content: <!DOCTYPE html> <html> <head> <style> button.accordion {     background-color: #eee;     color: #444;     cursor: pointer;     padding: 18px;     width: 100%;     border: none;     text-align: left;     outline: none;     font-size: 15px;     transition: 0.4s; } button.accordion.active, button.accordion:hover {     background-color: #ddd;  } div.panel {     padding: 0 18px;     display: none;     background-color: white; } </style> </head> <body> <h2>Accordion</h2> <button class="accordion">Section 1</button> <div class="panel">   <p>om jiLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercit