We Keep Coding

Only display the accordions if the search finds a match using JQuery

Newbie Alert! Be patient pls :
Inspired by the great work and help that #Oliver Trampleasure provided here: How to search through nested accordion using JS .
I found the solution for what I was working on, copied, used and adapted his script (thanks again!) however, the only thing I have been trying to figure how to change is how can I make all the questions and answers hidden from user's view, but when typing in the search box, if results are positive, it just reveals the accordions (question and/or answer, depending on the match) with its formatting and all?
Right now the Accordions are displayed by default and the search filters and only show those containing the search term. I would like to hide the accordion and only show if the search contains any valid term.
// Add click event to all .accordian-title
$(".accordian-title").click( function() {
// Check if this is already active
wasActive = $(this).closest(".accordian-element").hasClass("active");
// Remove all the .active siblings
$(this).closest(".accordian-wrapper").find(".accordian-element.active").removeClass("active");
// Activate the clicked .accordian-element if it wasn't active
if ( wasActive != true ) {
$(this).closest(".accordian-element").toggleClass("active");
}
});
// Launch search code after any change to input
$("#search").on('change keydown paste input', function() {
// Remove search term matching
$(".accordian-wrapper .found-term").removeClass("found-term");
// Remove all active classes
$(".accordian-wrapper .accordian-element.active").removeClass("active");
// Get search term
searchTerm = $(this).val().toUpperCase();
// Quit if search term is empty
// IT MIGHT BE A GOOD IDEA TO ADD A MINIMUM 3 CHARACTERS OR SIMILAR
if ( searchTerm == "" ) {
$(".accordian-wrapper").removeClass("searched");
return;
}
$(".accordian-wrapper").addClass("searched");
// Check anything within an accordian against the term
$(".accordian-wrapper *").each( function() {
// Get text only of this element (not children)
tempText = $(this).immediateText().toUpperCase();
// Check if search term is present in element
if ( tempText.indexOf(searchTerm) >= 0) {
// Add found-term to highlight the element with the search text
$(this).addClass("found-term");
// Activate all parent accordians to that it is visible
$(this).parents(".accordian-element").addClass("active");
}
});
});
// Get text of given element, but not it's children
// Taken from : https://stackoverflow.com/questions/3442394/using-text-to-retrieve-only-text-not-nested-in-child-tags#answer-32170000
$.fn.immediateText = function() {
return this.contents().not(this.children()).text();
};

You can add a class to hide elements when search text is empty.
See this example:
// Add click event to all .accordian-title
$(".accordian-title").click(function() {
// Check if this is already active
wasActive = $(this).closest(".accordian-element").hasClass("active");
// Remove all the .active siblings
$(this)
.closest(".accordian-wrapper")
.find(".accordian-element.active")
.removeClass("active");
// Activate the clicked .accordian-element if it wasn't active
if (wasActive != true) {
$(this).closest(".accordian-element").toggleClass("active");
}
});
// Launch search code after any change to input
$("#search").on("change keydown paste input", function() {
// Remove search term matching
$(".accordian-wrapper .found-term").removeClass("found-term");
// Remove all active classes
$(".accordian-wrapper .accordian-element.active").removeClass("active");
// Get search term
searchTerm = $(this).val().toUpperCase();
// Quit if search term is empty
// IT MIGHT BE A GOOD IDEA TO ADD A MINIMUM 3 CHARACTERS OR SIMILAR
if (searchTerm == "") {
// ADD HIDE CLASS HERE
$(".accordian-wrapper").removeClass("searched").addClass("hide");
return;
}
$(".accordian-wrapper").addClass("searched");
// Check anything within an accordian against the term
$(".accordian-wrapper *").each(function() {
// Get text only of this element (not children)
tempText = $(this).immediateText().toUpperCase();
// Check if search term is present in element
if (tempText.indexOf(searchTerm) >= 0) {
// Add found-term to highlight the element with the search text
$(this).addClass("found-term");
// Activate all parent accordians to that it is visible
$(this).parents(".accordian-element").addClass("active");
}
});
});
// Get text of given element, but not it's children
// Taken from : https://stackoverflow.com/questions/3442394/using-text-to-retrieve-only-text-not-nested-in-child-tags#answer-32170000
$.fn.immediateText = function() {
return this.contents().not(this.children()).text();
};
.main-content .content ul,
.main-content .content ol {
font-family: "Roboto", sans-serif !important;
color: gray !important;
overflow: auto;
font-style: normal !important;
}
.box a:link {
text-align: center;
display: block;
text-transform: uppercase;
font-family: "Roboto", sans-serif;
font-size: 12px;
text-decoration: none;
color: rgb(0, 133, 213);
letter-spacing: 2.5px;
}
.box a:hover {
text-align: center;
margin: 0 auto;
text-transform: uppercase;
font-family: "Roboto", sans-serif;
font-size: 11px;
text-decoration: none;
}
.box a:visited {
color: rgb(0, 133, 213);
text-decoration: none;
}
.box a:hover {
text-decoration: none;
font-family: "Roboto", sans-serif;
font-size: 11px;
}
.box a:active {
text-decoration: none;
font-family: "Roboto", sans-serif;
font-size: 11px;
}
/* HR styles */
hr.style-one {
border: 0;
height: 1px;
background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(44, 113, 204, 0.5), rgba(0, 0, 0, 0));
}
hr.style-two {
border: 0;
height: 1px;
background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
}
hr.style-3 {
border: 0;
height: 1px;
background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}
hr.style-4 {
border: 0;
height: 1px;
background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
hr.style-5 {
border: 0;
height: 1px;
background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
hr.style-6 {
border: 0;
height: 1px;
background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
hr.style-7 {
border: 0;
height: 1.5px;
background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}
hr.style-8 {
border: 0;
height: 2px;
background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
hr.style-9 {
border: 0;
height: 2.5px;
background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
}
.wrapper {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
min-width: 80%;
flex-wrap: wrap;
width: 100%;
}
.box {
width: 140px;
height: 140px;
-webkit-box-shadow: 0px 8px 15px 0px rgba(87, 84, 87, 1);
-moz-box-shadow: 0px 8px 15px 0px rgba(87, 84, 87, 1);
box-shadow: 0px 8px 15px 0px rgba(87, 84, 87, 1);
background-color: white;
border-radius: 35px;
transition: all 0.3s ease 0s;
outline: none;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 1.5px;
min-width: 1%;
margin: 10px;
text-align: center;
color: rgb(0, 133, 213);
}
.box:hover {
background-color: white;
box-shadow: 0px 15px 20px rgb(0, 133, 213);
color: white;
transform: translateY(-7px);
}
.material-icons.md-18 {
font-size: 18px;
}
.material-icons.md-24 {
font-size: 24px;
}
.material-icons.md-36 {
font-size: 36px;
}
.material-icons.md-78 {
font-size: 24px;
color: rgb(0, 133, 213);
}
/* buttons above */
.search-x {
width: 60%;
display: flex;
}
.searchTerm-x {
width: 100%;
border: 1.5px solid #008dd7;
border-right: none;
padding: 25px;
height: 6px;
border-radius: 10px 0 0 10px;
outline: none;
color: gray;
font-family: "Open Sans", sans-serif;
font-size: 20px;
-webkit-box-shadow: 0px 10px 19px -6px rgba(100, 175, 212, 1);
-moz-box-shadow: 0px 10px 19px -6px rgba(100, 175, 212, 1);
box-shadow: 0px 10px 19px -6px rgba(100, 175, 212, 0.6);
}
.searchTerm:focus {
color: #008dd7;
}
.searchButton-x {
width: 60px;
height: 53px;
border: 1px solid #008dd7;
background: #008dd7;
text-align: center;
color: #fff;
border-radius: 0 20px 20px 0;
cursor: pointer;
font-size: 22px;
-webkit-box-shadow: 0px 10px 19px -6px rgba(100, 175, 212, 1);
-moz-box-shadow: 0px 10px 19px -6px rgba(100, 175, 212, 1);
box-shadow: 0px 10px 19px -6px rgba(100, 175, 212, 0.6);
}
/*Resize the wrap to see the search bar change!*/
.wrap-s {
height: 100%;
width: 100%;
display: flex;
display: flex;
justify-content: center;
}
.search-x:hover {
transform: translateY(-2px);
transition: all 0.1s linear;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 "FontAwesome";
font-style: normal;
font-variant-ligatures: normal;
font-variant-caps: normal;
font-variant-numeric: normal;
font-variant-east-asian: normal;
font-weight: normal;
font-stretch: normal;
font-size: inherit;
line-height: 1;
font-family: FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.fa-search:before {
content: "\f002";
}
/* TESTING SEARCH */
/* Styling to hide and show content on click */
.accordian-content {
display: none;
font-family: "Roboto", sans-serif;
font-size: 16px;
color: gray;
}
.accordian-element.active>.accordian-content {
display: inherit;
}
.accordian-title {
cursor: pointer;
font-family: "Roboto", sans-serif;
font-size: 18px;
}
/* Styling for searching content and highlighting it */
/* Hide elements when search text is empty*/
.accordian-wrapper.hide .accordian-element {
display: none;
}
.accordian-wrapper.searched .accordian-element {
display: none;
}
.accordian-wrapper.searched .accordian-element.active {
display: inherit;
}
.found-term {
color: rgb(244, 152, 14);
}
/* Just some general styling to make it look nice */
.accordian-wrapper {
display: flex;
justify-content: center;
border-left: 0px solid grey;
border-top: 0px dashed grey;
}
.accordian-element {
padding: 10px 0px 10px 20px;
border-bottom: 0.5px solid lightgray;
}
.box-n {
height: 100%;
width: 50%;
-webkit-box-shadow: 0px 8px 15px 0px rgba(87, 84, 87, 1);
-moz-box-shadow: 0px 8px 15px 0px rgba(87, 84, 87, 1);
box-shadow: 0px 8px 15px 0px rgba(87, 84, 87, 1);
background-color: white;
border-radius: 0px;
transition: all 0.3s ease 0s;
cursor: pointer;
outline: none;
align-items: left;
justify-content: left;
letter-spacing: 1.5px;
min-width: 1%;
margin: 10px;
padding: 20px;
text-align: left;
color: rgb(0, 133, 213);
flex-wrap: flex;
flex-flow: column wrap;
max-width: 40%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrap-s">
<div class="search-x">
<input type="text" id="search" class="searchTerm-x" placeholder="What are you looking for?" value="">
<button class="searchButton-x" type="submit"> <i class="fa fa-search"></i> </button>
</div>
</div>
<br>
<br>
<br>
<div class="wrapper">
<div class="box"><span class="material-icons md-78" id="accmanagement"> account_box </span><br><br>Account Management</div>
<div class="box"><span class="material-icons md-78" id="labmanagement">supervisor_account </span><br><br>Group Management</div>
<div class="box"><span class="material-icons md-78" id="scheduling"> event_available </span><br><br>Scheduling Resources</div>
<div class="box"><span class="material-icons md-78" id="servicerequest"> snippet_folder </span><br><br>Service Requests</div>
<div class="box"><span class="material-icons md-78" id="billing"> attach_money </span><br><br>Billing</div>
<div class="box"><span class="material-icons md-78" id="reporting"> insert_chart_outlined </span><br><br>Reporting</div>
<div class="box"><span class="material-icons md-78" id="coresettings"> admin_panel_settings </span><br><br>Core<br>Settings</div>
<div class="box"><span class="material-icons md-78" id="others"> local_library </span><br><br>Others</div>
</div>
<br>
<br>
<br>
<hr class="style-one">
<br>
<!-- add hide class on initial load -->
<div class="accordian-wrapper hide">
<div class="box-n">
<p><span style="color: rgb(255, 255, 255); font-family: 'Roboto', sans-serif !important; font-size: 20px; line-height: 1px; background-color: rgb(250, 197, 28);"> HOT TOPICS </span><span style="font-family: 'Roboto', sans-serif !important; font-size: 15px;"> for </span>
<span style="color: rgb(41, 105, 176);"><strong><span style="font-family: 'Roboto', sans-serif !important; font-size: 20px;">CORE ADMINS</span></strong>
</span>
</p>
<div class="accordian-element">
<h4 class="accordian-title">How do I add a lab/PI?</h4>
<div class="accordian-content">
<p>Your PI or lab manager of the new lab will need to log into their account, click on the three vertical bars at the top left of the page and select My Groups, then enter the lab and Renan open the Gui Members tab. In this tab, at the bottom of
the user list, they can click on the 'Link existing user' button, to search for and add you to the lab group.</p>
</div>
</div>
<div class="accordian-element">
<h4 class="accordian-title">How do I login?</h4>
<div class="accordian-content">
<p>Logging in is easy, you can loging at '/login.html' or use a linked social media account.</p>
</div>
</div>
<div class="accordian-element">
<h4 class="accordian-title">How do I logout?</h4>
<div class="accordian-content">
<p>Logging in is easy, you can loging at '/login.html' or use a linked social media account.</p>
</div>
</div>
<div class="accordian-element">
<h4 class="accordian-title">How do I poo?</h4>
<div class="accordian-content">
<p>Logging in is hard, you can loging at Renan '/login.html' or use a linked social media account.</p>
</div>
</div>
</div>
<div class="box-n">
<p><span style="color: rgb(255, 255, 255); font-family: 'Roboto', sans-serif !important; font-size: 20px; line-height: 1px; background-color: rgb(250, 197, 28);"> HOT TOPICS </span><span style="font-family: 'Roboto', sans-serif !important; font-size: 15px;"> for </span>
<span style="color: rgb(41, 105, 176);"><strong><span style="font-family: 'Roboto', sans-serif !important; font-size: 20px;">CORE ADMINS</span></strong>
</span>
</p>
<div class="accordian-element">
<h4 class="accordian-title">How do I add a lab/PI?</h4>
<div class="accordian-content">
<p>Your PI or lab manager of the new lab will need to log into their account, click on the three vertical bars at Renan the top left of the page and select My Groups, then enter the lab and open the Members tab. In this tab, at the bottom of the
user list, they can click on the 'Link existing user' button, to search for and add you to the lab group.</p>
</div>
</div>
<div class="accordian-element">
<h4 class="accordian-title">How do I login?</h4>
<div class="accordian-content">
<p>Logging in is easy, you can loging at '/login.html' or use a linked social media account.</p>
</div>
</div>
<div class="accordian-element">
<h4 class="accordian-title">How do I logout?</h4>
<div class="accordian-content">
<p>Logging in is easy, you can loging at '/login.html' or use a linked social media account.</p>
</div>
</div>
<div class="accordian-element">
<h4 class="accordian-title">How do I poo?</h4>
<div class="accordian-content">
<p>Logging in is easy, you can loging at '/login.html' or use a linked social media account.</p>
</div>
</div>
</div>
</div>
<p>
<br>
</p>
<p style="text-align: center;">Can't find your answer? Contact us.</p>

Elements not visible on page

I moved a page from my old site to my new one, and cannot for the life of me figure out why the CSS isn't working.
https://ericaheinz.com/art/turrell/
It should have 5 concentric white ovals in the middle. I've inspected everything, the divs and CSS are there but they won't show up.
Here's the JS/CSS/HTML
// color looping
// http://forrst.com/posts/Endlessly_Looping_Background_Color_jQuery_Functi-ey7
var colors = new Array('#077bf4', '#9554d6', '#e62e5c', '#ff9466', '#CCCCCC', '#ffbe0a', '#46b3f2', '#70dab3', '#af93af', '#e51717', '#ffd1d9');
var color_index = 0;
var interval = 3000;
function bg_color_tween() {
$('body').animate({ backgroundColor: colors[color_index] }, interval, 'linear', function() {
if(color_index === colors.length) { color_index = 0; }
else { color_index++; }
bg_color_tween();
});
}
// rotation
$(document).ready(function() {
bg_color_tween();
$('.turrell').each(function(){
var r=Math.floor(Math.random()*90);
$('.carton').css({
'-moz-transform':'rotate('+r+'deg)',
'-webkit-transform':'rotate('+r+'deg)',
'transform':'rotate('+r+'deg)'
});
var t=Math.floor(Math.random()*10)+2;
var l=Math.floor(Math.random()*7)+3;
$('.egg').css({
'top':t+'%',
'left':l+'%'
});
});
});
.carton {
height: 95%;
width: 90%;
margin-left: 10%;
text-align: center;
position: relative;
z-index: -10;
}
.egg {
height: 76%;
width: 80%;
position: relative;
top: 12%;
left: 10%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
-moz-box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.4);
-webkit-box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.4);
box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.4);
color: #FFF;
}
.art-caption {
position: absolute;
bottom: 20px;
left: 3.5%;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 11px;
line-height: 13px;
margin: 0;
padding: 0;
}
.art-caption a {
color: #FFF;
opacity: .3;
transition: all 0.25s ease-in-out;
}
.art-caption a:hover {
opacity: .8;
}
<body class="turrell">
<div class="container">
<div class="carton">
<div class="egg">
<div class="egg">
<div class="egg">
<div class="egg">
<div class="egg">
<!-- THE LIGHT -->
</div>
</div>
</div>
</div>
</div>
</div>
<h6 class="art-caption">Homage to <em>Aten Reign</em> by James Turrell</h6>
</div>
</body>

You're missing "height" attributes in html, body and .container div. If you inspect, they had height 0 which simply do not display them.
If i added height: 100% to all of them, this is what i saw:

Display none and block does not work via JavaScript

I am developing a single-page-website because it's cheaper at firebase to host. My problem is that I must manage different screens at the single HTML file. So I must make screens disappear and appear again. I want to do this with main_dashboard_page.style.display = 'none'; and main_dashboard_page.style.display = 'block';.
Here is my HTML code:
<!-- _______________________________________________________________________________________________________________________________________ -->
<!-- L O G I N P A G E -->
<!-- _______________________________________________________________________________________________________________________________________ -->
<div class="login_page" id="login_page">
<div class="card_view">
<div class="login_container" id="login_container">
<div class="wrap_login">
<div class="login_form validate-form">
<span class="login_form_title p-b-26">
Login
</span>
<div>
<label for="email_field">E-Mail</label>
<input type="text" id="email_field" name="email_field" placeholder="E-Mail">
<label for="password_field">Passwort</label>
<input type="password" id="password_field" name="password_field" placeholder="Passwort">
<input type="submit" value="Einloggen" onclick="login()">
</div>
<div class="center_text_container p-t-115">
<span class="txt1">
Du hast noch keinen Account?
</span>
<a class="txt2" onclick="goToSignUp()">
Registrieren
</a>
</div>
<div class="modal">
<div class="modal-content">
<h1 id="msg_title"><h1>
<p id="msg_content"></p>
<div id="lds-ellipsis" class="lds-ellipsis" style="display: none;"><div></div><div></div><div></div><div></div></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- _______________________________________________________________________________________________________________________________________ -->
<!-- M A I N P A G E -->
<!-- _______________________________________________________________________________________________________________________________________ -->
<div class="html_side_main" id="html_side_main">
<div class="toolbar">
<div class="centered_toolbar">
<img src="../images/logo.png" width="200px" height="auto" style="position: absolute; left: 0px; margin-left: 30px;"></img>
<ul>
<li class="active"></i>Dashboard</li>
<li></i>Notenliste</li>
</ul>
<i class="logout"></i>Logout
</div>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class='main'>
<div class='main_padding'>
<div class='noten_stats'>
<p class="noten_stats_title">alpha_version: 1.0</p>
<div class="punkte_container">
<span class="punkte"></span>
<span class="punkte_text">Willkommen zur alpha version von kaffboard! Der Support ist rund um die Uhr erreichbar: raycroud#gmail.com</span>
</div>
</div>
</div>
</div>
</div>
As you can see I have two screens, which are represented as the divs:
1) ID: login_page
2) ID: html_side_main
Now the login_page should disapear and the html_side_main should appear, when user is logged in. I chek it with firebase as you could see in js:
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
changePage();
}
else {
var main_dashboard_page = document.getElementById("html_side_main");
main_dashboard_page.style.display = 'none';
}
});
function changePage() {
if (document.readyState === "complete") {
var login_page = document.getElementById("login_page");
var register_page = document.getElementById("register_page");
var main_dashboard_page = document.getElementById("html_side_main");
login_page.style.display = 'none';
main_dashboard_page.style.display = 'block';
}
As I heared that the css has a higher priority in the display of elements I would post the CSS here too:
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* F O N T */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
#font-face {
font-family: Poppins-Regular;
src: url('../public/fonts/poppins/Poppins-Regular.ttf');
}
#font-face {
font-family: Poppins-Medium;
src: url('../public/fonts/poppins/Poppins-Medium.ttf');
}
#font-face {
font-family: Poppins-Bold;
src: url('../public/fonts/poppins/Poppins-Bold.ttf');
}
#font-face {
font-family: Poppins-SemiBold;
src: url('../public/fonts/poppins/Poppins-SemiBold.ttf');
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body, html {
height: 100%;
font-family: Poppins-Regular, sans-serif;
}
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* L O G I N P A G E */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
a {
font-family: Poppins-Regular;
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
}
a:focus {
outline: none !important;
}
a:hover {
text-decoration: none;
color: #6a7dfe;
color: -webkit-linear-gradient(left, #21d4fd, #b721ff);
color: -o-linear-gradient(left, #21d4fd, #b721ff);
color: -moz-linear-gradient(left, #21d4fd, #b721ff);
color: linear-gradient(left, #21d4fd, #b721ff);
}
/*---------------------------------------------*/
h1,h2,h3,h4,h5,h6 {
margin: 0px;
}
label {
color: #fff;
}
p {
font-family: Poppins-Regular;
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
}
ul, li {
margin: 0px;
list-style-type: none;
}
/*---------------------------------------------*/
input {
outline: none;
border: none;
}
textarea {
outline: none;
border: none;
}
textarea:focus, input:focus {
border-color: transparent !important;
}
button {
outline: none !important;
border: none;
background: transparent;
}
button:hover {
cursor: pointer;
}
iframe {
border: none !important;
}
.card_view {
width: 100%;
margin: 0 auto;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 9px; /* 5px rounded corners */
}
.login_container {
width: 100%;
min-height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 15px;
background-color: rgba(38, 38, 38, 1);
}
.wrap_login {
width: 390px;
background-color: rgba(48, 48, 48, 1);
border-radius: 10px;
overflow: hidden;
padding: 77px 55px 33px 55px;
box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
}
/* Add rounded corners to the top left and the top right corner of the image */
img {
border-radius: 9px 9px 0 0;
}
.container {
padding: 2px 16px;
}
/*------------------------------------------------------------------
[ Form ]*/
.login_form {
width: 100%;
}
.login_form_title {
display: block;
font-family: Poppins-Bold;
font-size: 30px;
color: #fff;
line-height: 1.2;
text-align: center;
}
.login_form_title i {
font-size: 60px;
}
input, select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid rgba(48, 48, 48, 1);
border-radius: 4px;
box-sizing: border-box;
background-color: rgba(38, 38, 38, 1);
}
input[type=submit] {
background-color: rgba(6, 132, 134, 255);
font-family: Poppins-Medium;
}
input[type=submit]:hover {
background-color: rgba(8, 160, 163, 255);
cursor: pointer;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: rgba(92, 92, 92, 1);
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: rgba(92, 92, 92, 1);
}
::-ms-input-placeholder { /* Microsoft Edge */
color: rgba(92, 92, 92, 1);
}
input, select, textarea{
color: #fff;
}
/*//////////////////////////////////////////////////////////////////
[ Utility ]*/
.txt1 {
font-family: Poppins-Regular;
font-size: 13px;
color: #666666;
line-height: 1.5;
}
.txt2 {
font-family: Poppins-Regular;
font-size: 13px;
color: #fff;
line-height: 1.5;
cursor: pointer;
}
.txt2:hover {
color: rgba(6, 132, 134, 255);
}
.center_text_container {
text-align: center;
vertical-align: middle;
line-height: 50px;
}
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* M A I N P A G E */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
.html_side_main {
float: left;
height: auto;
width: 100%;
}
.html_side_main {
height: 100%;
}
/*TOOLBAR*/
.html_side_main .toolbar {
list-style-type: none;
height: 90px;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(48, 48, 48, 1);
}
.html_side_main .centered_toolbar {
display: flex;
align-items: center;
justify-content: center;
}
.html_side_main ul {
list-style-type: none;
list-style: none;
}
.html_side_main li {
float: left;
}
.html_side_main a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.html_side_main a:hover {
color: #cccccc;
}
/* MAIN */
.html_side_main .main_padding {
padding: 15px;
width: 100%;
}
.html_side_main .noten_stats {
height: 200px;
background: #cc2b5e;
background: -webkit-linear-gradient(to right, #753a88, #cc2b5e);
background: linear-gradient(to right, #753a88, #cc2b5e);
border-radius: 5px;
box-shadow: 1px 1px 5px #ddd;
}
.html_side_main .noten_stats_title {
color: #ffffff;
padding: 20px;
font-family: Montserrat-Medium;
}
.html_side_main .punkte_container{
height: 80%;
margin: auto;
width: 50%;
display: flex;
justify-content: center;
align-items: baseline;
}
.html_side_main .punkte {
color: #ffffff;
font-size: 50px;
font-family: Montserrat-Bold;
}
.html_side_main .punkte_text {
color: #ffffff;
font-family: Montserrat-Medium;
}
PROBLEM:
To set the display option in js does not work. First both of the divs are shown and when user logged in both of them disapear. I don't know why, but please can you help me to fix this this problem? Because the website is basicly finished, and I only have to convert it to a one html file.
Thanks in advance.

In isolation of a codepen, this works:
function setStyle(propValue){
console.log(propValue)
var main_dashboard_page = document.getElementById("html_side_main");
main_dashboard_page.style.display = propValue
}
Thus it is not a js⇄css problem. (as your title suggests)
Look deeper into your firebase events, add some console.log() into the code to verify, things actually get called, when you expect them to.
Generally, try to isolate your problem further and further (remove all unrelated clutter, i.e. your inner and unrelated html) as long as the problem persists...
As I heared that the css has a higher priority in the display of elements
Not true. Precedence is from lowest to highest:
Browser default
External style sheet (like yours)
Internal style sheet (commonly in <head>)
Inline style
...javascript runtime changes of CSS properties are a 4., they change the inline styles (at runtime, after DOM construction, so they are also higher than pre-exisiting inline styles), as you can also inspect with your browser's dev tools.
Your problem is much more trivial. Your #login_page is a parent of your #html_side_main, thus hiding it hides all. You are one closing </div> short. If your intend is to have two neighbouring (not nested) elements, probably meant to be somewhere around line :63.
(This is, why isolation aka damping down is good :-)

I would recommend to not use .style on a DOM node. Instead, I would recommend to create a class in css like:
.display-none {
display: none;
}
and then add the class via javascript:
login_page.className += " display-none";
That way you will have all your styles in your css and not in your javascript

Dependencies from package.json to index.html (jQuery)

I wonder how you actually use a dependency such as jQuery for your script. I tried linking it in index.html without success. My test function nor the function I'll later use works with jQuery, but the js file works when I link it in the head of HTML. How does the html & js files "know" what dependencies they can use? Thanks
/*package.json*/
{
"name": "principles",
"version": "1.0.0",
"description": "This is the life-long project of constantly updating principles for 4 AoL, Intellectual, Physical, Relationships, Spiritual",
"main": "IntPrin.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js"
},
"author": "Ronnlidd",
"license": "ISC",
"dependencies": {
"jquery": "^3.3.1"
}
}
/*NEW FILE, IntPrin.js , linked in head of HTML and working with vanilla js*/
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
window.onload = function() {
$("#toggleAllElms").click(function() {
$(".toggleAcronym").toggle('slow');
});
};
function oneElmToggle(elm) {
const display = elm.nextSibling.style.display;
if (display === "none" || display === "") {
elm.nextSibling.style.display = "block";
} else {
elm.nextSibling.style.display = "none";
}
}
* {
text-align: center;
height: auto;
padding: 10px 0;
}
.BOLD {
font-weight: 800;
}
.UNDERLINED {
text-decoration: underline;
}
.MARKED {
background-color: rgba(251, 255, 0, 0.315);
padding: 2px;
display: inline;
}
.CURSIVE {
font-style: italic;
}
.REDTEXT {
color: red;
}
body {
min-width: 700px;
}
header {
width: 100%;
min-width: 700px;
height: 80px;
text-align: center;
background: linear-gradient(to bottom right, rgb(0, 0, 0), red);
color: rgb(250,220,255);
position: absolute;
top: 0;
left: 0;
box-shadow: 0 3px 3px rgb(0,0,0);
}
header h1 {
margin-top: 23px;
}
.ChooseMetaPrinciple {
text-align: center;
border: 2px solid rgb(255, 0, 0);
width: 40%;
margin: 100px auto 0 auto;
}
.container {
display: flex;
width: 90%;
margin: 0 auto 30px auto;
flex-direction: column;
justify-content: space-around;
align-content: space-around;
}
.grid-item {
width: auto;
background: linear-gradient(to top left, rgb(255, 220, 200), rgb(250, 170, 70));
border-radius: 1%;
box-shadow: 0 7px 7px black;
position: relative;
top: 20%;
margin-top: 25px;
font-size: 2rem;
font-weight: 700;
}
.Meta-Principle {
width: 70%;
background: linear-gradient(to top left, rgb(0,0,0), rgb(0, 10, 70));
border-radius: 1%;
box-shadow: 0 7px 7px black;
color: white;
margin: 0 auto 30px auto;
position: relative;
top: 20%;
font-size: 2rem;
font-weight: 700;
}
.ChooseSubPrinciple {
text-align: center;
border: 2px solid rgb(255, 0, 0);
width: 40%;
margin: 20px auto 20px auto;
}
.flex {
display: flex;
justify-content: space-evenly;
flex-direction: row;
width: 98%;
margin: 0px auto 20px auto;
}
.flex > h4 {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid black;
border-radius: 10px;
text-align: center;
font-size: 20px;
width: 25%;
margin: 0 5px;
padding: 5px 2px;
}
.a, .b, .c, .d, .e, .f {
font-size: 1.6rem;
text-align: center;
background: linear-gradient(to top left, rgb(219, 7, 7), rgb(255, 238, 0));
border-radius: 1%;
box-shadow: 0 7px 7px black;
width: 86%;
margin: 20px auto;
}
.d {
margin-top: 200px;
}
.p {
font-size: 1.5rem;
text-align: center;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
border-radius: 1%;
box-shadow: 0 7px 7px black;
width: 70%;
margin: 25px auto;
color: aliceblue;
padding: 10px;
}
.p1container {
border: 1px solid black;
border-radius: 30%;
width: 40%;
margin: 0 auto;
height: 540px;
padding: 0 180px;
}
#p1 {
margin-top: 15px;
width: 97%;
border-right: 1px solid grey;
}
#badEcon {
margin-top: -35px;
height: 100px;
}
#p11, #p12 {
font-size: 1.416rem;
}
#p11 {
float: left;
width: 57%;
height: 100%;
background: linear-gradient(to top left, rgb(0, 0, 0), rgb(97, 97, 97));
border-right: 2px solid black;
}
#p12 {
width: 30%;
height: 100%;
float: right;
background: linear-gradient(to top right, rgb(0, 0, 0), rgb(133, 133, 133));
border-right: 1px solid grey;
}
#p121 {
width: 30%;
float: right;
border-right: 1px solid grey;
font-size: .8rem;
margin: 0 0 0 100%;
background: linear-gradient(to top right, rgb(0, 255, 179), rgb(0, 47, 255));
}
#p1211 {
width: 30%;
float: right;
background: linear-gradient(to top right, rgb(255, 0, 0), rgb(158, 0, 0));
font-size: .8rem;
border-right: 1px solid grey;
}
#p2, #p3, #p4 {
width: 56%;
}
.p5container {
border: 1px solid black;
border-radius: 30%;
width: 40%;
margin: 0 auto;
height: 280px;
padding: 20px 80px 20px 80px;
}
#p5 {
width: 500px;
}
.flex5 {
width: 105%;
margin: -30px auto 0 auto;
}
#p51, #p52, #p53 {
width: 28%;
background: linear-gradient(to top left, rgb(0, 0, 0), rgb(97, 97, 97));
color: white;
font-size: 1rem;
height: 100px;
}
#p6Acronyms {
width: 30%;
border: 1px solid blue;
margin: 0 auto;
padding: 10px;
}
#p6Acronyms button {
width: 100%;
border: 1px solid blue;
margin: 0 auto;
padding: 20px;
background: rgb(0, 152, 223);
color: azure;
}
#p6Acronyms button:hover {
background: rgb(0, 47, 255);
color: antiquewhite;
}
#p6Acronyms p {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML5><html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Intellectual Principles</title>
<meta name="description" content="Intellectual Principles">
<meta name="author" content="Ronnlidd">
<link rel="stylesheet" type="text/css" href="IntPrin.css">
<script type="text/javascript" src="IntPrin.js"></script>
</head>
<body>
<header>
<h1>Intellectual Principles</h1>
</header>
<h2 class="ChooseMetaPrinciple">Choose Meta-Principle</h2>
<div class="container">
<div class="grid-item">
<a>Boost your odds of success through de-centralized principle-guided decision-making.</a>
</div>
<div class="grid-item">
<a>Learn, Grow, Evolve. Be Anti-Fragile.</a>
</div>
<div class="grid-item">
<a>Apply principles in complex sub-systems of reality.</h2>
</div>
</div>
<div class="Meta-Principle">Boost your odds of success through de-centralized principle-guided decision-making.</div>
<h2 class="ChooseSubPrinciple">Choose Sub-Principle</h2>
<div class="flex">
<h4>Find out what reality looks like through <a>The Scientific Method</a> & phenomenology of consciousness.</h4>
<h4><a>Find your meaning/Why</a> <i>What do you want reality to be like?</i></h4>
<h4>Write down principles for making decisions in future realities.</h4>
<h4>Turn principles into algorithms.</h4>
<h4>Incrementally RUD principles for 4 AoL.</h4>
<h4>Practice. <i>Doing what's subj. right, using skill through principle-guided decision-making in complex systems.</i></h4>
</div>
<a><h4 class="a">Find out what reality looks like through <a>The Scientific Method</a> & phenomenology of consciousness.</h4></a>
<a><h4 class="b"><a>Find your meaning/Why</a> <i>What do you want reality to be like?</i></h4></a>
<a><h4 class="c">Write down principles for making decisions in future realities.</h4></a>
<div class="p1container">
<div class="p" id="p1">Meta-principles make sub-principles obsolete.</div>
<div id="badEcon">
<div class="p" id="p11">Principles serve you, you don't serve them. //Plan unrigidly & keep an open mind.</div>
<div class="p" id="p12">Delay decisions AMA(subj.)P.</div><br>
</div>
<div class="p" id="p121">Use situational awareness in combination with more general principles as basis for decisions. //Instead of seeking order and getting pseudoorder when planning.</div>
<div class="p" id="p1211">If subjective brain thinks, at a deliberate level in a state of happy intelligent consiousness, that a decision should be made, that decision can be made even though it violates some meta-principle.</div>
</div>
<div class="p" id="p2">If principle is subj. practically re-usable, Then write it down. Else embrace the subj. experience of principle.</div>
<div class="p" id="p3">Summarize books & experiences by principles and then transfer them to their place in the principle-hierarchy.</div>
<div class="p" id="p4">If subj. practical, Then write down what will falsify and make obsolete, the principle that you’re using/pondering. //Else keep it in top of mind.</div>
<div class="p5container">
<div class="p" id="p5">Use markers, colors and distinguishers. //To communicate with your future self.</div>
<div class="flex flex5">
<div class="p" id="p51"><span class="BOLD">Bold, </span><span class="UNDERLINED">underlined</span> or <span class="MARKED">marked</span> means part of principle is important.</div>
<div class="p" id="p52"><span class="CURSIVE">Cursive</span> means referencing something which has a mental representation.</div>
<div class="p" id="p53"><span class="REDTEXT">Red text</span> means it is not ordered enough for level of principle in which it currently is located, //Work has to be done in area.</div>
</div>
</div>
<div class="p" id="p6">Use acronyms to increase efficiency of principle-CRUD.</div>
<div id="p6Acronyms">
<button onclick="oneElmToggle(this)">RWE</button><p class="toggleAcronym">Real World Example</p>
<button onclick="oneElmToggle(this)">CRUD</button><p class="toggleAcronym">Create, Read, Update, Delete</p>
<button onclick="oneElmToggle(this)">CNS</button><p class="toggleAcronym">Central Nervous System</p>
<button onclick="oneElmToggle(this)">MPS</button><p class="toggleAcronym">Muscle Protein Synthesis</p>
<button onclick="oneElmToggle(this)">I.e.</button><p class="toggleAcronym">In essence</p>
<button onclick="oneElmToggle(this)">ALAP</button><p class="toggleAcronym">As Long As Possible</p>
<button onclick="oneElmToggle(this)">AMAP</button><p class="toggleAcronym">As Much As Possible</p>
<button onclick="oneElmToggle(this)">CoC</button><p class="toggleAcronym">Contents of Consciousness</p>
<button onclick="oneElmToggle(this)">RR(P)(F)-R</button><p class="toggleAcronym">Risk Reward (Probability)(Fragility) - Ratio</p>
<button onclick="oneElmToggle(this)">AoL</button><p class="toggleAcronym">Area of Life (=Intellectual, Physical, Relationships & Intellectual)</p>
<button onclick="oneElmToggle(this)">MBS</button><p class="toggleAcronym">Mind Body & Spirit</p>
<button onclick="oneElmToggle(this)">QoC</button><p class="toggleAcronym">Quality of Consciousness</p>
<button onclick="oneElmToggle(this)">PFC</button><p class="toggleAcronym">Pre-Frontal Cortex</p>
<button onclick="oneElmToggle(this)">SRV</button><p class="toggleAcronym">Survival & Reproduction Value. //(Often used to describe factors with directional effect on this.)</p>
<button onclick="oneElmToggle(this)">P/T-R</button><p class="toggleAcronym">Practice/Theory-Ratio</p>
<button id="toggleAllElms"><h2>Toggle All</h2></button><p class="toggleAcronym">This button toggles all acronym descriptions to Show/Hide</p>
</div>
<a><h4 class="d">Turn principles into algorithms.</h4></a>
<a><h4 class="e">Incrementally RUD principles for 4 AoL.</h4></a>
<a><h4 class="f">Practice. <i>Doing what's subj. right, using skill through principle-guided decision-making in complex systems.</i></h4></a>
<!-- <div class="Meta-Principle">
<h2>Learn, Grow, Evolve. Be Anti-Fragile.</h2>
</div>
<div class="Meta-Principle">
<h2>Apply principles in complex sub-systems of reality.</h2>
</div> -->
<footer>
</footer>
</body>
</html>

DIV not expanding with content - used methods (min-height, overflow:hidden,clearing div..none worked :-( )

I am sorry if I am asking a redundant question but I tried to use almost all options given in this website and being a beginner may be I am struggling to use them to my leverage, here is the fiddle I created for my code(added several answers), I am just trying to fit in "Add Answers(Optional)" into the "tab-content" div but it doesn't seem to expanding with the content and "Add Answers" label is overshooting. Can someone just suggest what is going wrong? It would be great help...
http://jsfiddle.net/83PTq/2/
HTML Code:
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Polls</li>
<li class="tab-link" data-tab="tab-2">tab2</li>
</ul>
<!-- Content for each tab is decided -->
<div id="tab-1" class="tab-content current">
<!-- To add answer options -->
<form action="ask_question" class="answer_options" method="POST">
<textarea name="question" class="question_textarea" type="text" placeholder="Your query, please ?"></textarea>
<div class="add_answer_label">Add Answers(optional)</div>
<div class="answers_textboxes">
<table id="dataTable">
<tr>
<td>
<input type="text" required="required" name="BX_NAME[]">
</td>
</tr>
</table>
<div class="clear"></div>
</div>
</form>
</div>
<div id="tab-2" class="tab-content">Tada</div>
</div>
CSS File
body {
margin-top: 100px;
font-family:'Trebuchet MS', serif;
line-height: 1.0
height: 100%;
}
.container {
width:800px;
margin: 0 auto;
overflow: auto;
min-height:100%;
}
ul.tabs {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li {
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current {
background: #DFF5B0;
color: #222;
}
.tab-content {
display: none;
padding: 15px;
}
.clear {
width:100%;
float:none;
clear:both;
}
.tab-content.current {
display: inline-block;
background: #DFF5B0;
overflow:auto;
min-height:1%;
}
.question_textarea {
background: white;
border: 1px #ddd solid;
width: 600px;
height: 100px;
font: 9pt Consolas;
overflow: hidden;
}
form.answer_options {
width:754px;
margin: 20px auto 0px auto;
background-color:#DFF5B0;
padding:5px;
}
.answer_options .form label {
float: left;
text-align: left;
margin-right: 5px;
margin-top:2px;
width:auto;
}
.answer_options .form input {
width:100px;
}
.answer_options label {
color:#444;
width:48px;
float: left;
text-align: right;
margin-right: 6px;
margin-top:2px;
}
form.answer_options label.optional {
float: left;
text-align: right;
margin-right: 6px;
margin-top:2px;
color: #A3A3A3;
}
form.answer_options label.obinfo {
float:right;
padding:3px;
font-style:italic;
}
form.answer_options input {
width: 140px;
color: #000;
float: left;
margin-right: 5px;
}
form.answer_options input.long {
width: 247px;
color: #505050;
}
form.answer_options input.short {
width: 40px;
color: #505050;
}
form.answer_options input[type=radio] {
float:left;
width:15px;
}
form.answer_options label.gender {
margin-top:-1px;
margin-bottom:2px;
width:34px;
float:left;
text-align:left;
line-height:19px;
}
form.answer_options input[type=text] {
border: 1px solid #E1E1E1;
height: 18px;
}
form.answer_options input[type=password] {
height: 18px;
}
form.answer_options input[type=button] {
background:#9b1515;
border: 1px #ddd solid;
}
form.answer_options input[type=button]:hover {
cursor:pointer;
background:#d85353;
}
form.answer_options .submit {
color: #fff;
cursor: pointer;
float:left;
margin:10px;
padding:5px;
background: #9b1515;
background-image: linear-gradient(bottom, rgba(0, 0, 0, 0.1) 0, rgba(255, 255, 255, 0.1) 100%);
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.1) 0, rgba(255, 255, 255, 0.1) 100%);
background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.1) 0, rgba(255, 255, 255, 0.1) 100%);
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.1) 0, rgba(255, 255, 255, 0.1) 100%);
background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.1) 0, rgba(255, 255, 255, 0.1) 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, 0.1)), color-stop(1, rgba(255, 255, 255, 0.1)));
}
form.answer_options .submit:hover {
background:#505050;
}
form.answer_options .submit:active {
background:#ccc;
color: #000;
}
form.answer_options input[type=text].small {
height: 18px;
width:30px;
}
form.answer_options input[type=checkbox] {
width:14px;
margin-top:4px;
}
form.answer_options select {
border: 1px solid #E1E1E1;
float:left;
margin-bottom:3px;
color: #505050;
margin-right:5px;
}
.post_query {
height: 39px;
left: 760px;
position: absolute;
top: 274px;
width: 40px;
z-index: 3;
}
.answers_textboxes {
height: 39px;
left: 500px;
position: absolute;
top: 288px;
width: 144px;
z-index: 3;
}
.add_answer_label {
height: 39px;
left: 335px;
position: absolute;
top: 293px;
width: 163px;
z-index: 3;
}
.add_answer_image {
position: absolute;
top: 289px;
}
.polls_tab {
background:#DFF5B0;
}
Thanks in advance

Welcome to the fun world of HTML & CSS.
As jmore pointed out in his answer, the problem you faced was due to position:absolute which caused the element(s) to be taken out of the DOM flow. If you haven't had a chance yet, take a look at this MDN article that explains how position works. As you probably saw from our comments, it's an important concept to understand :)
MDN article: https://developer.mozilla.org/en-US/docs/Web/CSS/position
What you're trying to accomplish can be done a couple ways (as jmore pointed out), but the easiet way is to wrap your elements and then float the wrapper to the right. Using your mark up, you'll see that I wrapped the two divs in a container div, additionalAnswersWrapper.
<div class="additionalAnswersWrapper">
<div class="add_answer_label">Add Answers(optional)</div>
<div class="answers_textboxes">
<table id="dataTable">
<tr>
<td>
<input type="text" required="required" name="BX_NAME[]">
</td>
</tr>
</table>
<div class="clear"></div>
</div>
</div>
Once you've wrapped your divs, you'll want to just float that element right.
Here's a fiddle demonstrating: http://jsfiddle.net/83PTq/4/
I wanted to take the time and point out a few other things that will help you as you continue learning.
You should avoid using tables for layout. Tables are for tabular data, so using it to wrap your input is bad practices.
There's a concept of web design called "responsive design". While I won't get into responsive design too much (it's beyond the scope of this question), there is an idea that your page should work across all devices. By hardcoding widths (for instance, the textarea), you've constrainted the element. You COULD use media queries to change the width, but it's much easier to let the parent take care of that.
Hopefully this answer was helpful.

it's because you are using absolute positioning which breaks the element out of the flow of the document. Positioning things is bad practice and should be a last result. Get rid of that and use something like float or display: inline-block
JSFIDDLE
.answers_textboxes {
height: 39px;
width: 144px;
z-index: 3;
display: inline-block;
vertical-align: top;
margin: 5px 0 0 0;
}
.add_answer_label {
height: 39px;
width: 163px;
z-index: 3;
display: inline-block;
vertical-align: top;
margin: 5px 0 0 0;
}