Displaying default tab content while hiding other tab content in Javascript can be achieved through a simple code implementation

Question

Displaying default tab content while hiding other tab content in Javascript can be achieved through a simple code implementation

I have designed tabs using the <button> element and enclosed the tab content within separate <div></div> tags like shown below:

function displayTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");         
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";                
}

<button class="tablinks" onclick="displayTab(event, 'Tab1')">Tab1</button>
<button class="tablinks" onclick="displayTab(event, 'Tab2')">Tab2</button>

<div id="Tab1" class="tabcontent">
    <h5>Title</h5>
    <div class="a">
        <p>Content</p>
    </div>
</div>

By default, all contents are initially hidden. In order to display Tab1 by default, how can I modify the script?

javascript html css

Answer 1

Answer №1

    <div id="Tab1" style="display: block;" class="tabcontent">
        <h5>Header</h5>
        <div class="a">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div id="Tab2" style="display: none;" class="tabcontent">
        <h5>Header 2</h5>
        <div class="a">
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        </div>
    </div>

If you decide to add additional tabs, remember to maintain their style as display: none with only Tab1 set to display:block.

Answer 2

    <div id="Tab1" style="display: block;" class="tabcontent">
        <h5>Header</h5>
        <div class="a">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div id="Tab2" style="display: none;" class="tabcontent">
        <h5>Header 2</h5>
        <div class="a">
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        </div>
    </div>

If you decide to add additional tabs, remember to maintain their style as display: none with only Tab1 set to display:block.

Answer 3

Answer №2

Utilize the bootstrap tab feature, ensuring that the first tab is always active by setting it as class="active" for easy maintenance. Check out this link to learn more about using bootstrap tabs: here

In addition, your code appears to be fine. Simply show or hide tabs based on the onclick event to display or conceal the desired tab easily.

Answer 4

Utilize the bootstrap tab feature, ensuring that the first tab is always active by setting it as class="active" for easy maintenance. Check out this link to learn more about using bootstrap tabs: here

In addition, your code appears to be fine. Simply show or hide tabs based on the onclick event to display or conceal the desired tab easily.

Answer 5

Answer №3

function toggleTab(val) {
  if ($("#" + val).hasClass("ActivTab")) {
    $("#" + val).removeClass("ActivTab").addClass("deactivTab")
  } else {
    $("#" + val).addClass("ActivTab").removeClass("deactivTab")
  }
}

.ActivTab {
  display: block
}

.deactivTab {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="tablinks" onclick="toggleTab('Tab1')">Tab1</button>
<button class="tablinks" onclick="toggleTab('Tab2')">Tab2</button>

<div id="Tab1" class="tabcontent ActivTab">
  <h5>Title</h5>
  <div class="a">
    <p>Content</p>
  </div>
</div>
<div id="Tab2" class="tabcontent deactivTab">
  <h5>Title2</h5>
  <div class="a">
    <p>Content</p>
  </div>
</div>

Answer 6

function toggleTab(val) {
  if ($("#" + val).hasClass("ActivTab")) {
    $("#" + val).removeClass("ActivTab").addClass("deactivTab")
  } else {
    $("#" + val).addClass("ActivTab").removeClass("deactivTab")
  }
}

.ActivTab {
  display: block
}

.deactivTab {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="tablinks" onclick="toggleTab('Tab1')">Tab1</button>
<button class="tablinks" onclick="toggleTab('Tab2')">Tab2</button>

<div id="Tab1" class="tabcontent ActivTab">
  <h5>Title</h5>
  <div class="a">
    <p>Content</p>
  </div>
</div>
<div id="Tab2" class="tabcontent deactivTab">
  <h5>Title2</h5>
  <div class="a">
    <p>Content</p>
  </div>
</div>

Answer 7

Answer №4

HTML: Make sure to assign the '.open' class to your initial tab.

CSS:


.tabcontent {
display: none;
}

.tabcontent.open {
display: block;
}

JavaScript: Create a click event that will handle toggling the '.open' class. When clicked, remove the '.open' class from any existing '.tabcontent.open' element and add it to the clicked tab. All within the same click snippet.

Simple, right?

Answer 8

HTML: Make sure to assign the '.open' class to your initial tab.

CSS:


.tabcontent {
display: none;
}

.tabcontent.open {
display: block;
}

JavaScript: Create a click event that will handle toggling the '.open' class. When clicked, remove the '.open' class from any existing '.tabcontent.open' element and add it to the clicked tab. All within the same click snippet.

Simple, right?

Answer 9

Answer №5

Utilize this code to display data upon clicking any tab. Simply replace your existing JavaScript code with the corrected one provided below.

function showData(event, toolName) {

  var i, tabsContent, tabsLinks;

  tabsContent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabsContent.length; i++) {
    tabsContent[i].style.display = "none";
  }

  tabsLinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tabsLinks.length; i++) {
    tabsLinks[i].className = tabsLinks[i].className.replace(" active", "");
  }

  document.getElementById(toolName).style.display = "block";
  event.currentTarget.className += " active";
}

tabsContent = document.getElementsByClassName("tabcontent");
for (i = 1; i < tabsContent.length; i++) {
  tabsContent[i].style.display = "none";
}

Answer 10

Utilize this code to display data upon clicking any tab. Simply replace your existing JavaScript code with the corrected one provided below.

function showData(event, toolName) {

  var i, tabsContent, tabsLinks;

  tabsContent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabsContent.length; i++) {
    tabsContent[i].style.display = "none";
  }

  tabsLinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tabsLinks.length; i++) {
    tabsLinks[i].className = tabsLinks[i].className.replace(" active", "");
  }

  document.getElementById(toolName).style.display = "block";
  event.currentTarget.className += " active";
}

tabsContent = document.getElementsByClassName("tabcontent");
for (i = 1; i < tabsContent.length; i++) {
  tabsContent[i].style.display = "none";
}

Displaying default tab content while hiding other tab content in Javascript can be achieved through a simple code implementation

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Having difficulty with CSS animation and background issues

Is there a way to set the starting position of the overflow scroll to the middle?

What is the best way to connect an external CSS file to an HTML file in Pycharm?

Call a PHP function within a functions file using a JavaScript function

Adjustable div with varying positions and dimensions

Passing data to a server-side component in Next.js: a guide

Tips for displaying dynamic images using the combination of the base URL and file name in an *ngFor loop

Is there a way to include the request body (req.body) in the msg object using express-winston?

Updating the angular $resource method

The choice between using inline style objects with React or utilizing traditional CSS classes presents distinct advantages and

Creating a merged object from a split string array in TypeScript

Using `reduce` in TypeScript, you can organize an array of objects based on a shared property

Unable to access property within JSON object sent via POST request

Using Material-UI to implement a Link component from the react-router library

Issue: Module 'blog' not found in the specified path in my Node.js application

Layer divs on top of each other without explicitly defining their stacking order

Leveraging the power of Auth0 and Prisma in aggregating user data

Tips for correctly mentioning a user while using message.channel.send in discord.js

What is the best method of transferring all procedures from frida javascript rpc.exports to python?

The jQuery prop method seems to be malfunctioning