How do I add stuff in the Files tab?

Question

Please help fix my javascript error.

When click on Files button, it should unhide <div id="Files" class="tabcontent"> and hide <div id="Overview" class="tabcontent">

I want to do this with a couple of loops that first hide both .tabcontent areas, and then unhide the one with #Files or #Overview - but my js is not working.

<!DOCTYPE html>
<html>
<style>
tab1 { padding-left: 2em; }
body {font-family: arial;
 background-color: #00111a;
  color: white;

}
 .button1 {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 12px 26px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    background-color: #1ab2ff; 
    color: white;
    font-weight: bold;
    transition: 0.3s;
 
}
.button1:hover {
    background-color: #66ccff;
}
.button1:active {
    background-color: #0088cc;
}

ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1ab2ff;
    display: inline-block;
}
ul.tab li {float: left; display: inline-block;}
ul.tab li a {
    display: inline-block;
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}
ul.tab li a:hover {
    background-color: #66ccff;
}
ul.tab li a:focus, .active {
    background-color: #0088cc;
}
.tabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
}
h3 {
      opacity: 0.5;
}
p {
      opacity: 0.5;
}
</style>
<body>
<tab1><h2>SuperBlaze27-Core</h2>
<ul class="tab">
  <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Overview')" id="defaultOpen">Overview</a></li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Files')">Files</a></li>
</ul>
<div id="Overview" class="tabcontent">
  <h3>SuperBlaze27 Core</h3>
  <p>
  Still in development but really cool!<br>
  If you want to download click the spoiler button or click files. In the spoiler is the latest version. I would reccomend downloading from the files section. ;)
    <div class="spoiler">
    <input type="button" class="button1" onclick="showSpoiler(this);" value="[Spoiler]" />
    <div class="inner" style="display:none;">
    <h3>www.superblaze27.com/site/minecraft/plugins/spigot/projects/superblaze27-core/downloads/latest</h3>
    </div>
  </p>
</div>
<div id="Files" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>
<script>
function openTab(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";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
function showSpoiler(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }
</script>

</script> 
</body>
</html>

Above is my code. It would be very helpful if you could help! THX in advance!

and where is the question exactly – Salem Jan 14 '17 at 20:09 — Salem, Jan 14 '17 at 20:09

score 0 · Answer 1 · edited May 23 '17 at 12:01

First, you were missing some closing tags, one of which meant that your Files div was inside the Overview div. Hiding Overview would then hide Files.

It is also simplest to use a class to hide the desired div. See revised example, below.

function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        addClass('hidden', tabcontent[i]);
        if (tabcontent[i].id==tabName){
          //alert(tabName);
          removeClass('hidden', tabcontent[i]);
        }
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
function showSpoiler(obj){
    var inner = obj.parentNode.getElementsByTagName("div")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
}
function addClass( classname, element ) {
    var cn = element.className;
    //test for existance
    if( cn.indexOf( classname ) != -1 ) {
        return;
    }
    //add a space if the element already has class
    if( cn != '' ) {
        classname = ' '+classname;
    }
    element.className = cn+classname;
}

function removeClass( classname, element ) {
    var cn = element.className;
    var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
    cn = cn.replace( rxp, '' );
    element.className = cn;
}

tab1 { padding-left: 2em; }
body {font-family: arial;
 background-color: #00111a;
  color: white;

}
 .button1 {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 12px 26px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    background-color: #1ab2ff; 
    color: white;
    font-weight: bold;
    transition: 0.3s;
 
}
.button1:hover {
    background-color: #66ccff;
}
.button1:active {
    background-color: #0088cc;
}

ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1ab2ff;
    display: inline-block;
}
ul.tab li {float: left; display: inline-block;}
ul.tab li a {
    display: inline-block;
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}
ul.tab li a:hover {
    background-color: #66ccff;
}
ul.tab li a:focus, .active {
    background-color: #0088cc;
}
.hidden{display:none;}
.tabcontent {
    padding: 6px 12px;
    border-top: none;
}
h3 {
      opacity: 0.5;
}
p {
      opacity: 0.5;
}
.active{display:block;}

<body>
<tab1>
  <h2>SuperBlaze27-Core</h2>
  <ul class="tab">
    <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Overview')" id="defaultOpen">Overview</a></li>
    <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Files')">Files</a></li>
  </ul>
  <div id="Overview" class="tabcontent">
  <h3>SuperBlaze27 Core</h3>
  <p>Still in development but really cool!<br>If you want to download click the spoiler button or click files. In the spoiler is the latest version. I would reccomend downloading from the files section. ;)</p>
  <div class="spoiler">
    <input type="button" class="button1" onclick="showSpoiler(this);" value="[Spoiler]" />
    <div class="inner" style="display:none;">
      <h3> www.superblaze27.com/site/minecraft/plugins/spigot/projects/superblaze27-core/downloads/latest
      </h3>
    </div>
  </div><!-- .spoiler -->
</div><!-- #Overview -->
<div id="Files" class="tabcontent hidden">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

Resources (please upvote):

How do I add a class to a given element?

score 0 · Answer 2 · answered Jan 14 '17 at 20:56

The issue is that you need to add a closing div tag before the #files div. You did not close one of the inner div tags, so when you hide the divs with the tabContents class, it hides both the Overview and Files divs.

This is the working code:

<!DOCTYPE html>
<html>
<style>
tab1 { padding-left: 2em; }
body {font-family: arial;
 background-color: #00111a;
  color: white;

}
 .button1 {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 12px 26px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    background-color: #1ab2ff; 
    color: white;
    font-weight: bold;
    transition: 0.3s;

}
.button1:hover {
    background-color: #66ccff;
}
.button1:active {
    background-color: #0088cc;
}

ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1ab2ff;
    display: inline-block;
}
ul.tab li {float: left; display: inline-block;}
ul.tab li a {
    display: inline-block;
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}
ul.tab li a:hover {
    background-color: #66ccff;
}
ul.tab li a:focus, .active {
    background-color: #0088cc;
}
.tabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
}
h3 {
      opacity: 0.5;
}
p {
      opacity: 0.5;
}
</style>
<body>
<tab1><h2>SuperBlaze27-Core</h2>
<ul class="tab">
  <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Overview')" id="defaultOpen">Overview</a></li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Files')">Files</a></li>
</ul>
<div id="Overview" class="tabcontent">
  <h3>SuperBlaze27 Core</h3>
  <p>
  Still in development but really cool!<br>
  If you want to download click the spoiler button or click files. In the spoiler is the latest version. I would reccomend downloading from the files section. ;)
    <div class="spoiler">
        <input type="button" class="button1" onclick="showSpoiler(this);" value="[Spoiler]" />
        <div class="inner" style="display:none;">
        <h3>www.superblaze27.com/site/minecraft/plugins/spigot/projects/superblaze27-core/downloads/latest</h3>
        </div>
    </div>
  </p>
</div>
<div id="Files" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>
<script>
function openTab(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";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
function showSpoiler(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }
</script>

</script> 
</body>
</html>

How do I add stuff in the Files tab?

2 Answers2