Welcome to SR7Themes Explore

Tab Master


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


Rate this article

Getting Info...
Student | Blogger | Youtuber

Post a Comment

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Cookies Policy

We employ the use of cookies. By accessing Lantro UI, you agreed to use cookies in agreement with the Lantro UI's Privacy Policy.

Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.