Learn How To Create CSS TABS / TAB CSS CODEPEN (jquery tabs)

    HELLO READER THE CSS TABS CODING ARE GIVEN BELOW; IN THIS HTML, CSS AND JAVASCRIPT WAS USED TO MAKE IT;

HTML CODE FOR TABS:-
 <!DOCTYPE html>  
 <html lang="en">  
  <head>  
   <meta charset="UTF-8" />  
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
   <title>Document</title>  
   <link rel="stylesheet" href="style.css" />  
  </head>  
  <body>  
   <div class="tabs-container">  
    <div class="tab-headings-container">  
     <h2 class="tab-heading wordpress-btn active">WordPress</h2>  
     <h2 class="tab-heading blogger-btn">Blogger</h2>  
     <h2 class="tab-heading wix-btn">Wix</h2>  
    </div>  
    <div class="panels-container">  
     <div class="panel wordpress active">  
      <h2>WordPress</h2>  
      <p>  
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos nobis  
       illo iste reiciendis, quam cupiditate, ipsum harum dolore eveniet  
       nemo consequuntur? Hic magni voluptatum doloribus error dolorum  
       labore, possimus soluta.  
      </p>  
      <p>  
       Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi,  
       ratione!  
      </p>  
      <p>  
       Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis  
       repellendus vero praesentium, quisquam corporis quos eius omnis unde  
       quibusdam voluptatem.  
      </p>  
      <a href="#">Learn More</a>  
     </div>  
     <div class="panel blogger">  
      <h2>Blogger</h2>  
      <p>  
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos nobis  
       illo iste reiciendis, quam cupiditate, ipsum harum dolore eveniet  
       nemo consequuntur? Hic magni voluptatum doloribus error dolorum  
       labore, possimus soluta.  
      </p>  
      <p>  
       Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi,  
       ratione!  
      </p>  
      <a href="#">Learn More</a>  
     </div>  
     <div class="panel wix">  
      <h2>Wix</h2>  
      <p>  
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos nobis  
       illo iste reiciendis, quam cupiditate, ipsum harum dolore eveniet  
       nemo consequuntur? Hic magni voluptatum doloribus error dolorum  
       labore, possimus soluta.  
      </p>  
      <p>  
       Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi,  
       ratione!  
      </p>  
      <a href="#">Learn More</a>  
     </div>  
    </div>  
   </div>  
 <script src="main.js"></script>  
  </body>  
 </html>  

  CSS tabs:-


 body {  
  font-family: "Roboto", sans-serif;  
 }  
 .tabs-container {  
  padding: 16px;  
  max-width: 600px;  
  margin: 0 auto;  
 }  
 .tab-headings-container {  
  display: flex;  
  border-bottom: 1px solid #dee;  
 }  
 .tab-headings-container .tab-heading {  
  border: 1px solid #cacaca;  
  padding: 8px 24px;  
  font-size: 16px;  
  margin: 0 8px;  
  border-radius: 10px 10px 0 0;  
  cursor: pointer;  
  transition: 300ms;  
  font-weight: normal;  
  border-bottom: 0;  
 }  
 .tab-headings-container .tab-heading:hover {  
  background: #eee;  
 }  
 .tab-headings-container .tab-heading.active {  
  background: #353535;  
  color: #eee;  
  font-weight: bold;  
 }  
 .panels-container h2 {  
  color: #b92646;  
 }  
 .panels-container a {  
  background: #b92646;  
  padding: 10px 48px;  
  color: #fff;  
  text-decoration: none;  
  border-radius: 8px;  
  font-weight: bold;  
  margin-top: 10px;  
  display: inline-block;  
  transition: 300ms;  
 }  
 .panels-container a:hover {  
  background: #83132b;  
 }  
 .panels-container {  
  position: relative;  
 }  
 .panels-container .panel {  
  position: absolute;  
  opacity: 0;  
  transform: translateX(100px);  
  padding: 20px;  
  line-height: 1.8;  
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);  
  border-radius: 0 0 10px 10px;  
  transition: 500ms cubic-bezier(0.24, 1.57, 1, 1);  
 }  
 .panels-container .panel.active {  
  opacity: 1;  
  transform: translateX(0);  
  transition-delay: 100ms;  
 }  

 (JavaScript) Jquery Tabs:-


 const wordpressPanel = document.querySelector(".panels-container .wordpress");  
 const bloggerPanel = document.querySelector(".panels-container .blogger");  
 const wixPanel = document.querySelector(".panels-container .wix");  
 const wordpressBtn = document.querySelector(".tabs-container .wordpress-btn");  
 const bloggerBtn = document.querySelector(".tabs-container .blogger-btn");  
 const wixBtn = document.querySelector(".tabs-container .wix-btn");  
 const tabsContainer = document.querySelector(".tabs-container");  
 let activePanel = wordpressPanel;  
 const calculateHeight = () => {  
  let panelHeight = activePanel.clientHeight;  
  tabsContainer.style.marginBottom = panelHeight + "px";  
 };  
 calculateHeight();  
 const removeActiveFromAllPanels = () => {  
  wordpressPanel.classList.remove("active");  
  bloggerPanel.classList.remove("active");  
  wixPanel.classList.remove("active");  
 };  
 const removeActiveFromAllBtns = () => {  
  wordpressBtn.classList.remove("active");  
  bloggerBtn.classList.remove("active");  
  wixBtn.classList.remove("active");  
 };  
 wordpressBtn.addEventListener("click", () => {  
  removeActiveFromAllPanels();  
  wordpressPanel.classList.add("active");  
  removeActiveFromAllBtns();  
  wordpressBtn.classList.add("active");  
  activePanel = wordpressPanel;  
  calculateHeight();  
 });  
 bloggerBtn.addEventListener("click", () => {  
  removeActiveFromAllPanels();  
  bloggerPanel.classList.add("active");  
  removeActiveFromAllBtns();  
  bloggerBtn.classList.add("active");  
  activePanel = bloggerPanel;  
  calculateHeight();  
 });  
 wixBtn.addEventListener("click", () => {  
  removeActiveFromAllPanels();  
  wixPanel.classList.add("active");  
  removeActiveFromAllBtns();  
  wixBtn.classList.add("active");  
  activePanel = wixPanel;  
  calculateHeight();  
 });  
   💖THANKS💖
💚VISIT AGAIN💚

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

buttons=(Accept !) days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !