Join our telegram group Join Now!

Tab Master

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Introduction

Welcome to my blog SR7Themes!
Today the topic is Tab Master Hope this post might be useful to you and please stay tuned to our blog for further updates. Remember the end contains surprises!



WordPress

Blogger

Wix

WordPress

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.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi, ratione!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis repellendus vero praesentium, quisquam corporis quos eius omnis unde quibusdam voluptatem.

Learn More

Blogger

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.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi, ratione!

Learn More

Wix

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.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi, ratione!

Learn More






  <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>




  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;

}

 



    const tabsContainer = document.querySelector(".tabs-container");

    

    if (tabsContainer) {

    

    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");

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();

});

      

    }
CODE BY SR7THEMES

    

    

Quick Guide

HTML code- Add the HTML code anywhere u want on blogger Page/Post
CSS code- Add the CSS code in
1. Go to Theme option
2. Click on Customise
3. Go to Advanced meanu
4. Click on Theme colour meanu
5. Click on Add CSS and and there u paste CSS

Js. code- Add the Js. Above the </body> tag

Disclaimer

If you are going to use any of our code, give the following credit and don't remove the credit comment from the codes. If you don't want to give credit, you are strictly prohibited to use any of our code.


Add the following Credit:

[ Source Code by Plus UI Tejash ]

Help me to cross the milestone of 550-600 Subscribers: Tech With Deo After that Redesigned Version of Median UI v1.5: Plus UI v1.1 will release...


Conclusion

I expressed my views on the topic 'Tab Master '. Hope you are furnished my opinion. The post mustn't be copied without prior permission by emailing or telegram.

Source:
https://www.sr7themes.eu.org/2021/11/tab-master.html?hl=ar

About the Author

Student | Blogger | Youtuber

إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.