enzolima enzolima - 3 months ago 8
CSS Question

Divs don't show up on webpage

I have no idea what happened. In the body of my website, i have a system with tabs that toggle between two divs to show content. Since an hour ago, the divs fail to show their content, even though it is all there in the source code. I must have changed something, but i have NO idea where. Can someone help me look for possible errors?

To be clear: it's about the content in the

<div id="algemeen" class="tabcontent">
and
<div id="science" class="tabcontent">
divs.

I have included the relevant HTML, JS and CSS code below.
A JSfiddle with the complete code can be found here: https://jsfiddle.net/rpvrmLcr/

<div id="content-wrapper">
<div class="mui--appbar-height"></div>
<div class="mui-container-fluid">

<ul class="tab">
<li><a href="#" class="tablinks" onclick="openEditorTab(event, 'algemeen')">Algemeen</a></li>
<li><a href="#" class="tablinks" onclick="openEditorTab(event, 'science')">Science</a></li>
</ul>

<div id="algemeen" class="tabcontent">
<div class="table">

<div class="table-row">
<div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=1', '_blank');">presenteren</div>
<div class="niveaubutton">1</div>
<div class="editbutton">Bewerken</div>
<div class="rubriccodebutton">&#128437;</div>
</div>
<div class="table-row">
<div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=2', '_blank');">samenwerken</div>
<div class="niveaubutton">1</div>
<div class="editbutton">Bewerken</div>
<div class="rubriccodebutton">&#128437;</div>
</div>
<div class="table-row">
<div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=6', '_blank');">Metarubric</div>
<div class="niveaubutton">4 vmbo</div>
<div class="editbutton">Bewerken</div>
<div class="rubriccodebutton">&#128437;</div>
</div>
<div class="table-row">
<div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=8', '_blank');">Naama</div>
<div class="niveaubutton">1 vmbo</div>
<div class="editbutton">Bewerken</div>
<div class="rubriccodebutton">&#128437;</div>
</div>
<div class="table-row">
<div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=9', '_blank');">Naam</div>
<div class="niveaubutton">1 vmbo</div>
<div class="editbutton">Bewerken</div>
<div class="rubriccodebutton">&#128437;</div>
</div>
<div class="table-row">
<div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=10', '_blank');">Naam</div>
<div class="niveaubutton">1 vmbo</div>
<div class="editbutton">Bewerken</div>
<div class="rubriccodebutton">&#128437;</div>
</div>
<div class="table-row">
<div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=11', '_blank');">Naamasdf</div>
<div class="niveaubutton">4 vmbo</div>
<div class="editbutton">Bewerken</div>
<div class="rubriccodebutton">&#128437;</div>
</div>
<div class="table-row">
<div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=12', '_blank');">Naamhtr</div>
<div class="niveaubutton">1 vmbo</div>
<div class="editbutton">Bewerken</div>
<div class="rubriccodebutton">&#128437;</div>
</div>
<div class="table-row">
<div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=13', '_blank');">Naam123</div>
<div class="niveaubutton">1 vmbo</div>
<div class="editbutton">Bewerken</div>
<div class="rubriccodebutton">&#128437;</div>
</div>
</div>
</div>
<div id="science" class="tabcontent">
<div class="table">

<div class="table-row">
<div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=3', '_blank');">onderzoeken</div>
<div class="niveaubutton">1</div>
<div class="editbutton">Bewerken</div>
<div class="rubriccodebutton">&#128437;</div>
</div>
<div class="table-row">
<div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=4', '_blank');">onderzoekverslag</div>
<div class="niveaubutton">1</div>
<div class="editbutton">Bewerken</div>
<div class="rubriccodebutton">&#128437;</div>
</div>
<div class="table-row">
<div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=5', '_blank');">Testrun</div>
<div class="niveaubutton">3 vmbo</div>
<div class="editbutton">Bewerken</div>
<div class="rubriccodebutton">&#128437;</div>
</div>
<div class="table-row">
<div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=7', '_blank');">Kadeng</div>
<div class="niveaubutton">2 vmbo</div>
<div class="editbutton">Bewerken</div>
<div class="rubriccodebutton">&#128437;</div>
</div>
</div>
</div>

</div>
</div>


The CSS code:

#content-wrapper {
min-height: 100%;
min-width: 900px;
overflow-x: hidden;
margin-left: 0px;
transition: margin-left 0.2s;

/* sticky bottom */
margin-bottom: -60px;
padding-bottom: 160px;
}


@media (min-width: 768px) {
#header {
left: 200px;
}

#sidedrawer {
transform: translate(200px);
}

#content-wrapper {
margin-left: 200px;
}

#footer {
margin-left: 200px;
}



body.hide-sidedrawer #content-wrapper {
margin-left: 0;
}


}



.mui-appbar {
background-color:#DFD;
color:#FFF;
position: relative;
z-index: 1;
}


/* Style the tab content */
.tabcontent {
display: none;
padding: 20px 12px;
border: none;
}
.rubricbutton {
display: table-cell;
width: 400px;
text-align: center;
vertical-align: middle;
line-height: 40px;
background: #FFF;
height: 50px;
float: left;
padding: 5px;
margin: 3px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

.rubriccodebutton {
display: table-cell;
width: 50px;
font-size: 30px;
background: #FFF;
height: 50px;
float: left;
padding: 5px;
margin: 3px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

.niveaubutton {
display: table-cell;
width: 100px;
text-align: center;
vertical-align: middle;
line-height: 40px;
background: #FFF;
height: 50px;
float: left;
padding: 5px;
margin: 3px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

.editbutton {
display: table-cell;
width: 150px;
text-align: center;
vertical-align: middle;
line-height: 40px;
background: #FFF;
height: 50px;
float: left;
padding: 5px;
margin: 3px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

.listcontainer {
width: 100%;
margin-top: 20px;
border: 1px solid #000;
}

.separator {
width: 100%;
height: 1px;
float: none;
}

.table {
display: table;
}

.table-row {
display: table-row;
margin-top: 20px;
height: 80px;
}


The JS code:

function openEditorTab(evt, subjectName) {
// Declare all variables
var i, tabcontent, tablinks;

// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}

// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}

// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(subjectName).style.display = "block";
evt.currentTarget.className += " active";
}

Answer

Hmm. The script code had some errors. The closure

jQuery(function($){

wasn't closed.

I tried closing it at the top and it works. Try with this code.

jQuery(function ($) {
    var $bodyEl = $('body'),
        $sidedrawerEl = $('#sidedrawer');
});

And keep the other functions defined in global scope if you want to keep the "onclick" attribute. Otherwise if you want to keep the functions defined inside closure then remove the onclick attribute from buttons and add event listeners inside the closure.