# Default open tab

**URL:** <https://forum.kirupa.com/t/default-open-tab/640073>\
**Category:** Uncategorized\
**Created:** [July 22, 2019, 10:24pm UTC](https://forum.kirupa.com/t/default-open-tab/640073 "2019-07-22T22:24:44Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![clo](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/clo/32/9759_2.png) [@clo](https://forum.kirupa.com/u/clo)\
**Post date:** [July 22, 2019, 10:24pm UTC](https://forum.kirupa.com/t/default-open-tab/640073/1 "2019-07-22T22:24:44Z")

</div>

I have made multiple divs with unique ids of the same “tabContent” class. The goal is to have the div with id = “0” to be clicked/open by default, and all the other divs are only displayed when their corresponding tabs are clicked. Currently, the divs are connected to the tabs, but by default all the contents of all divs are shown. I tried to correct this by initialising the the first tab (id=“0”) as clicked, but it doesn’t seem to have done anything.

**Here is my JS function for hiding and showing tabs on the page:**  
const selectTab = function(event){  
var i, tabcontent, tablinks;  
tabcontent = document.getElementsByClassName(“tabContent”);  
for (i = 0; i \< tabcontent.length; i++) {  
tabcontent[i].style.display = “none”;  
}  
show(event); //Just contains: document.getElementById(event).style.display = “block”;  
}

**Here is the the function at the top of my file that attempts to initialise the the first tab (id=“0”) as clicked:**  
window.onload = function () {  
document.getElementsByClassName(‘tabContent’)[0].click()  
};

I suppose I could default display: hidden all the divs except for the one with id=“0” in a in-line style, but I feel like there is a better way of doing this? Not sure why the above is wrong either.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 23, 2019, 3:50am UTC](https://forum.kirupa.com/t/default-open-tab/640073/2 "2019-07-23T03:50:58Z")

</div>

You are very close! There are two ways to make this work. Using your approach, to programmatically fire a click event, you need to use `dispatchEvent` since the `click()` function doesn’t always work on many elements:

```
var mouseEvent = new MouseEvent('click', {
  bubbles: true,
  cancelable: true,
  view: window
});

var firstTab = document.getElementsByClassName(‘tabContent’)[0];
firstTab.dispatchEvent(myEvent);

```

[This article](https://www.kirupa.com/html5/custom_events_js.htm) goes into more detail on where this is coming from.

The second approach (which I prefer) is to have a function whose sole job it is to set the default state of your app. When your page loads, this function calls and sets the visibility/display of the elements based on what you want.

😄

---

<div class="post-metadata">

**Author:** ![clo](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/clo/32/9759_2.png) [@clo](https://forum.kirupa.com/u/clo)\
**Post date:** [July 23, 2019, 4:19pm UTC](https://forum.kirupa.com/t/default-open-tab/640073/3 "2019-07-23T16:19:38Z")

</div>

Tried the first approach and added an event listener since the article mentioned needing one, but i’m getting an error “TypeError: Cannot read property ‘addEventListener’ of undefined”?

```
var mouseEvent = new MouseEvent('click', {
      bubbles: true,
      cancelable: true,
      view: window
});

var firstTab = document.getElementsByClassName("tabContent")[0];
firstTab.addEventListener(mouseEvent, selectTab, false);
firstTab.dispatchEvent(mouseEvent);
```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 23, 2019, 5:46pm UTC](https://forum.kirupa.com/t/default-open-tab/640073/4 "2019-07-23T17:46:26Z")

</div>

The error means that the `firstTab` element isn’t getting found. This means that `document.getElementsByClassName` isn’t returning an element. How are you specifying your JS? Is it located in the same document alongside your HTML? Or are you loading it from an external JS file? (I’m trying to see if your code is running before the HTML/DOM has fully loaded - see [this article](https://www.kirupa.com/html5/running_your_code_at_the_right_time.htm) for more info 😛 ).

---

<div class="post-metadata">

**Author:** ![clo](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/clo/32/9759_2.png) [@clo](https://forum.kirupa.com/u/clo)\
**Post date:** [July 23, 2019, 7:17pm UTC](https://forum.kirupa.com/t/default-open-tab/640073/5 "2019-07-23T19:17:06Z")

</div>

Yep, the HTML and JS are in the same file. The HTML is in a classic function App() {  
return ();} under the JS.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 23, 2019, 9:35pm UTC](https://forum.kirupa.com/t/default-open-tab/640073/6 "2019-07-23T21:35:48Z")

</div>

Can you post a copy of your full HTML and JS? Is this a React app? I’m not sure what what `App() { ... }` means, so seeing your code would help 🙂

---

<div class="post-metadata">

**Author:** ![clo](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/clo/32/9759_2.png) [@clo](https://forum.kirupa.com/u/clo)\
**Post date:** [July 23, 2019, 9:54pm UTC](https://forum.kirupa.com/t/default-open-tab/640073/7 "2019-07-23T21:54:44Z")

</div>

```
var mouseEvent = new MouseEvent('click', {
      bubbles: true,
      cancelable: true,
      view: window
    });

var show = function (elem) {
  document.getElementById(elem).style.display = "flex";
};

var hide = function (elem) {
	elem.style.display = 'none';
};

const selectTab = function(event){
  var i, tabcontent;
  tabcontent = document.getElementsByClassName("tabContent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  show(event);
}

var firstTab = document.getElementsByClassName('tabContent')[0];
firstTab.addEventListener(mouseEvent, selectTab, false);
firstTab.dispatchEvent(mouseEvent);

function App() {
  return (
    <div className="App">
        <div className = "sticky">
          <div style={cancelSave}>
            <Button label="Cancel" onClick={actionHandler} quiet variant="primary" />
            <Button label="Save & Close" onClick={actionHandler} variant="cta" />
          </div>
          <div style={headingStyle}>
            <Heading style={{"color": "#6D6D6D"}} variant="subtitle1">
            Folder_Name
            </Heading>
          </div>
        </div>

        <TabList aria-label="Default" onChange={selectTab}>
          <Tab>Basics</Tab>
          <Tab>Advanced</Tab>
          <Tab>Cloud Services</Tab>
          <Tab>Permissions</Tab>
        </TabList>

      <div id="0" className="tabContent" label="Basics">
            <Form style = {{width: 480, paddingLeft: 20}}>
              <Heading variant="subtitle1" style = {{"marginTop": 30}}>
                Basic Information
              </Heading>
            </Form>
      </div>
      <div id="1" className="tabContent">
        <Form style = {{width: 480, paddingLeft: 20}}>
          <Heading variant="subtitle1" style = {{"marginTop": 30}}>
            Settings
          </Heading>
        </Form>
      </div>
      <div id="2" className="tabContent">
        <Form style = {{width: 480, paddingLeft: 20}}>
          <Heading variant="subtitle1" style = {{"marginTop": 30}}>
            Cloud Service Configuration
          </Heading>
        </Form>
      </div>
      <div id="3" className="tabContent">
        <Form style = {{width: 480, paddingLeft: 20}}>
          <Heading variant="subtitle1" style = {{"marginTop": 30}}>
            Cloud Service Configuration
          </Heading>
        </Form>
      </div>
    </div>
  );
}
```

---

<div class="post-metadata">

**Author:** ![clo](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/clo/32/9759_2.png) [@clo](https://forum.kirupa.com/u/clo)\
**Post date:** [July 23, 2019, 9:55pm UTC](https://forum.kirupa.com/t/default-open-tab/640073/8 "2019-07-23T21:55:21Z")

</div>

Yes it is a React App

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 24, 2019, 11:16pm UTC](https://forum.kirupa.com/t/default-open-tab/640073/9 "2019-07-24T23:16:06Z")

</div>

Thanks! My guess is that your JavaScript fully runs before your React code has had a chance to put the elements in the DOM. One approach would be to put all of your JavaScript inside the `componentDidMount` lifecycle method:

```auto
      componentDidMount() {
        this.timer = setInterval(this.timerTick, 100);
      }

```

This article goes into more detail on that method and others: [https://www.kirupa.com/react/component\_lifecycle.htm](https://www.kirupa.com/react/component_lifecycle.htm)