How To Have Multiple Tabbed Sections Open The First Tab On Load Using Html, Css, And Javascript?

June 25, 2024 Post a Comment

I have added multiple tabbed sections to my webpage but I am having trouble making sure the second tabbed section also opens up the first tab on load. I am currently following this

Solution 1:

Use class-names instead of ids for cityes. Add a "show" class-name to the active content:

functionopenCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (var i = 0; i < tabcontent.length; i++) {
    tabcontent[i].classList.remove('show');
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (var i = 0; i < tablinks.length; i++) {
    tablinks[i].classList.remove('active');
  }
  document.getElementsByClassName(cityName)[0].classList.add('show');
  document.getElementsByClassName(cityName)[1].classList.add('show');
  var cuttentTabClass = evt.currentTarget.className.split(" ")[1];
  console.log(cuttentTabClass);
  document.getElementsByClassName(cuttentTabClass)[0].classList.add('active');
  document.getElementsByClassName(cuttentTabClass)[1].classList.add('active');
}

// Get the element with id="defaultOpen" and click on itdocument.getElementById("defaultOpen").click();

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */.tabbutton {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */.tabbutton:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */.tabbutton.active {
  background-color: #ccc;
}

/* Style the tab content */.tabcontent {
  display: none;
  padding: 6px12px;
  border: 1px solid #ccc;
  border-top: none;
}
.tabcontent.show {
	display: block;
}

<p>In this example, we use JavaScript to "click" on the London button, to open the tab on page load.</p><!--first tab--><divclass="tab"><buttonclass="tablinks l"onclick="openCity(event, 'london')"id="defaultOpen">London</button><buttonclass="tablinks p"onclick="openCity(event, 'paris')">Paris</button><buttonclass="tablinks t"onclick="openCity(event, 'tokyo')">Tokyo</button></div><divclass="tabcontent london"><h3>London</h3><p>London is the capital city of England.</p></div><divclass="tabcontent paris"><h3>Paris</h3><p>Paris is the capital of France.</p></div><divclass="tabcontent tokyo"><h3>Tokyo</h3><p>Tokyo is the capital of Japan.</p></div><br><br><br><br><br><!--second tab--><divclass="tab"><buttonclass="tablinks l"onclick="openCity(event, 'london')">London</button><buttonclass="tablinks p"onclick="openCity(event, 'paris')">Paris</button><buttonclass="tablinks t"onclick="openCity(event, 'tokyo')">Tokyo</button></div><divclass="tabcontent london"><h3>London</h3><p>London is the capital city of England.</p></div><divclass="tabcontent paris"><h3>Paris</h3><p>Paris is the capital of France.</p></div><divclass="tabcontent tokyo"><h3>Tokyo</h3><p>Tokyo is the capital of Japan.</p></div>

Solution 2:

Here is a jQuery solution. It uses a small (jQuery) plugin. I hope that helps.

/*
 * EZ Tabs
 * by Razvan Zamfir
 */
! function(i) {
  i.fn.eztabs = function(n) {
    var a = i.extend({
      tabsList: ".ez_tabs",
      boxContainer: ".ez_content",
      animation: "none",
      animationTime: 500,
      fullWidthTabs: !0
    }, n);
    returnthis.each(function() {
      var n = this,
        t = a.tabsList,
        e = a.boxContainer;
      a.fullWidthTabs === !0 && i(t).addClass("fullwidth");
      var s = i(n).find(e).children();
      i(s).hide(), i(s[0]).show();
      var o = i(n).find(t).children("li");
      i(o[0]).addClass("active"), i(o).each(function(n) {
        i(this).on("click", function() {
          i(this).addClass("active"), i(o).not(this).removeClass("active");
          var t = i(s[n]);
          return"none" === a.animation ? (i(s).hide(), i(t).show()) : "slideUpDown" === a.animation ? (i(s).slideUp(a.animationTime), i(t).slideDown(a.animationTime)) : "slideLeftRight" === a.animation && (i(e).css("overflow", "hidden"), i(s).css({
            width: "100%",
            display: "none"
          }), i(s).animate({
            marginLeft: "-110%"
          }, a.animationTime), i(t).css("display", "block").animate({
            marginLeft: "0"
          }, a.animationTime)), !1
        })
      })
    })
  }
}(jQuery);

$(function() {
  $('.tabset').eztabs({
    animation: 'slideUpDown',
    animationTime: 200
  });
});

.tabset {
    max-width: 500px;
    margin: 10px0;
    -moz-box-shadow: 1px1px2px0rgba(0, 0, 0, .15);
    -webkit-box-shadow: 1px1px2px0rgba(0, 0, 0, .15);
    box-shadow: 1px1px2px0rgba(0, 0, 0, .15);
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 14px;
}
ul.ez_tabs {
    margin: 0!important;
    padding: 0;
    list-style-type: none !important;
    height: 31px;
    border-bottom: 1px solid #ccc;
}
ul.ez_tabsli {
    display: block;
    margin: 0!important;
    float: left;
    text-align: center;
    color: #777;
    font-weight: 600;
    padding: 08px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ccc;
    -webkit-border-radius: 3px3px00;
    -moz-border-radius: 3px3px00;
    border-radius: 3px3px00;
    cursor: pointer;
    background: #ffffff;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);    
    background: -webkit-linear-gradient(#ffffff0%, #e5e5e5100%);
    background: -o-linear-gradient(#ffffff0%, #e5e5e5100%);
    background: linear-gradient(#ffffff0%, #e5e5e5100%);    
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0);
}
ul.ez_tabsli.active {
    color: #111;
    background: #fff;
    border-bottom: 1px solid #fff;
}
.ez_content {
    position: relative;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    -webkit-border-radius: 003px3px;
    -moz-border-radius: 003px3px;
    border-radius: 003px3px;
}
article {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    color: #222;
    background: #fff;
}
articleul {
    margin: 0;
}
articlep,
articleulli {
    line-height: 1.5;
    margin: 0;
}
articlep {
    text-align: justify;
}

/* Full width tabs */ul.ez_tabs.fullwidth {
    display: flex;
}
ul.ez_tabs.fullwidthli {
    -webkit-flex: 1; 
    -ms-flex: 1;    
    flex: 1;
}

<linkhref="https://fonts.googleapis.com/css?family=Roboto&display=swap"rel="stylesheet"><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="tabset"><ulclass="ez_tabs"><li>Description</li><li>Delivery</li><li>Composition</li></ul><divclass="ez_content"><article><h3>London</h3><p>London is the capital city of England.</p></article><article><h3>Paris</h3><p>Paris is the capital of France.</p></article><article><h3>Tokyo</h3><p>Tokyo is the capital of Japan.</p></article></div></div><divclass="tabset"><ulclass="ez_tabs"><li>Description</li><li>Delivery</li><li>Composition</li></ul><divclass="ez_content"><article><h3>London</h3><p>London is the capital city of England.</p></article><article><h3>Paris</h3><p>Paris is the capital of France.</p></article><article><h3>Tokyo</h3><p>Tokyo is the capital of Japan.</p></article></div></div>

You can add your own styles, of course.

Solution 3:

You have 2 problems

You have 2 elements with the same id so the code just select the first
You are using same classes for all tabs and content use different classes name for each panel
You hide all content every time to click on button, you should use separate functions or better make on dynamic function

Solution 4:

I was taking a gander at your code. And it looks like the issue is that you are using the same ID for both tabs. ID's should be unique.

Solution 5:

As Megabyter said, both ids need to be unique. However, your click function hides all of the 'tabcontent' divs. Therefore, calling .click() for two unique ids will only show the second tab's content (because the second .click() will hide the content shown by the first). I would suggest just adding the class .active to the two tab contents you want to show on page load in your HTML and then adding in your CSS the class display: block to .active. That would also allow you in your function to just add the class .active and not worry about changing the display style in the Javascript.

Edit

You also need some way for your function to distinguish between the two tabbed sections and only change the section clicked. Here is a working example.

I added two container <div>s with num attributes so the function can distinguish them. This number is passed in as the third argument in the openCity() function. The function loops through the two containers, and only edits the container where the number passed into the function equals the num attribute of the container.
The child tab content <div>s and tab links of the correct container are retrieved by calling .getElementsByClassName() for both See here.
Then the function loops through the child tab contents and tab links (only the ones in the correct container <div>) and removes the class .active from them.
Finally, the second parameter was changed to a number (instead of an id). The number is equal to 1, 2, and 3 respectively for both sets of tab links. This number is used to find the correct child tab link and its corresponding tab content within the correct container and add the class .active to them.

P.S. You do not have to define the variable i for a for loop. for loops do it all for you. while loops require defining the variable beforehand and incrementing it within the loop after every iteration.

Free Interactive Html5 Tutorial