We Keep Coding

JS file not loading in html

For some reason BoostOdds.js has stopped loading for my html, jQuery code in same file, BoostOdds.js, is working so I'm completely lost, how is that even possible?
Look to the Toggle all Button to see if jQuery is working and all other buttons to see if JS is working.
Index.html
&
BoostOdds.js
Are in the same directory. Here's the code, thanks for the help:
function oneElmToggle(elm) {
const display = elm.nextSibling.style.display;
if (display === "none" || display === "") {
elm.nextSibling.style.display = "block";
}
else {
elm.nextSibling.style.display = "none";
}
}
window.onload = function () {
$("#toggleAllElms").click(function () {
$(".toggleAcronym").toggle('fast');
});
};
* {
text-align: center;
height: auto;
padding: 10px 0;
box-sizing: border-box;
text-decoration: none;
color: black;
}
.p {
font-size: 1.5rem;
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;
}
.pv2 {
background: linear-gradient(to top left, rgb(196, 196, 196), rgb(0, 0, 0));
border-radius: 1%;
box-shadow: 0 7px 7px black;
padding: 10px 5px;
color: aliceblue;
margin: 10px 0;
}
.pv2 span {
color: white;
}
.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, .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);
}
#IPT {
color: aliceblue;
margin-top: 0px;
}
.CMPT /* Choose Meta Principle Title */ {
text-align: center;
border: 2px solid rgb(255, 0, 0);
width: 40%;
margin: 80px auto 0 auto;
}
.CMPC /* Choose Meta Principle Container*/ {
list-style-type: none;
width: 90%;
margin: -10px auto 20px auto;
}
.MPC /* Meta Principle Choice*/ {
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;
margin-top: 25px;
font-size: 2rem;
font-weight: 700;
}
.MPC:hover {
color: white;
background: linear-gradient(to top left, rgb(0,0,0), rgb(0, 10, 70));
}
.MP /* Meta Principle */ {
width: 60%;
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;
font-size: 2rem;
font-weight: 700;
}
.CSP {
text-align: center;
border: 2px solid rgb(255, 0, 0);
width: 40%;
margin: 40px auto 20px auto;
}
.CSPFC {
display: flex;
justify-content: space-evenly;
flex-direction: row;
width: 98%;
margin: 0px auto 20px auto;
}
.SPC {
background-color: white;
border: 1px solid black;
border-radius: 10px;
text-align: center;
font-size: 15px;
width: 25%;
margin: 0 3px;
box-shadow: -1px 3px 3px black;
}
.SPC:hover {
background: linear-gradient(to top left, rgb(219, 7, 7), rgb(255, 238, 0));
color: black;
}
.SP {
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;
}
.C {
border: 1px solid black;
border-radius: 30%;
width: 60%;
margin: 0 auto;
display: grid;
grid-template-columns: 50% 50%;
grid-auto-rows: auto;
padding: 35px 80px;
grid-column-gap: 15px;
}
#p1131 {
border-right: 1px solid grey;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
grid-area: 1 / 1 / 2 / 3;
}
#p11311 {
background: linear-gradient(to top left, rgb(0, 0, 0), rgb(97, 97, 97));
grid-area: 2 / 1 / 3 / 2;
}
#p11312 {
grid-area: 2 / 2 / 3 / 3;
background: linear-gradient(to top right, rgb(0, 0, 0), rgb(133, 133, 133));
}
#p11313 {
grid-area: 3 / 2 / 4 / 3;
border-right: 1px solid grey;
background: linear-gradient(to top right, rgb(0, 255, 179), rgb(0, 47, 255));
font-size: .7rem;
}
#p11314 {
background: linear-gradient(to top right, rgb(255, 0, 0), rgb(158, 0, 0));
border-right: 1px solid grey;
font-size: .7rem;
grid-area: 4 / 2 / 5 / 3;
}
.C3C { /*Container 3 Columns*/
grid-template-columns: repeat(3, 33%);
padding: 25px 80px;
}
#p1135 {
grid-area: 1 / 1 / 2 / 4;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
}
#p11351 {
grid-area: 2 / 1 / 3 / 2;
}
#p11352 {
grid-area: 2 / 2 / 3 / 3;
}
#p11353 {
grid-area: 2 / 3 / 3 / 4;
}
#p1136Acronyms {
width: 30%;
border: 1px solid black;
margin: 0 auto;
padding: 5px;
}
#p1136Acronyms button {
width: 100%;
border: 1px solid rgb(0, 0, 0);
margin: 0 auto;
padding: 10px;
background: linear-gradient(to bottom right, rgb(168, 0, 0), rgb(253, 0, 0), rgb(255, 255, 255));
color: azure;
}
#p1136Acronyms button:hover {
background: linear-gradient(to bottom right, rgb(0, 47, 255), rgb(0, 47, 255), white);
color: antiquewhite;
}
#p1136Acronyms p {
display: none;
}
#p1137 span {
color: white;
}
#p1138 {
grid-area: 1 / 1 / 2 / 4;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
}
footer {
height: 30px;
width: 100%;
background: linear-gradient(to bottom right, rgb(255, 0, 0), rgb(0, 0, 0));
position: absolute;
left: 0;
background: linear-gradient(to bottom right, rgb(0, 0, 0), red);
}
<!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="../../css/BoostOdds.css">
<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="BoostOdds.js"></script>
<!-- COMMENTS FOR UNDERSTANDING THIS FILE -->
<!-- class="p" is default principle box, class="pv2" is a second version of a principle box, suitable for grid-items, often overwritten withs styles for specifici levels of principles.-->
</head>
<body>
<header>
<h1 id="IPT"> <!-- Intellectual Principles Title-->
Intellectual Principles
</h1>
</header>
<h2 class="CMPT">Choose Meta-Principle</h2> <!-- Choose Meta Principle Title -->
<ul class="CMPC"> <!-- Choose Meta Principle Container -->
<a href="#p11"><li class="MPC"> <!-- Meta Principle Choice -->
Boost your odds of success through de-centralized principle-guided decision-making.
</li></a>
<a href=""><li class="MPC"> <!-- Meta Principle Choice -->
Learn, Grow, Evolve. Be Anti-Fragile.
</li></a>
<a href=""><li class="MPC"> <!-- Meta Principle Choice -->
Apply principles in complex sub-systems of reality.
</li></a>
</ul>
<h2 class="MP" id="p11"> <!-- Meta Principle -->
Boost your odds of success through de-centralized principle-guided decision-making.
</h2>
<h2 class="CSP"> <!-- Choose Sub Principle -->
Choose Sub-Principle
</h2>
<div class="CSPFC"> <!-- Choose Sub Principle Flex Container-->
<a class="SPC" href="#p111"> <!-- Sub Principle Choice -->
Find out what reality looks like through <i>The Scientific Method</i><!-- Link to other doc--> & phenomenology of consciousness.
</a>
<a class="SPC" href="#p112"> <!-- Sub Principle Choice -->
<i>Find your meaning/Why What do you want reality to be like?</i><!-- Link to other doc-->
</a>
<a class="SPC" href="#p113"> <!-- Sub Principle Choice -->
Write down principles for making decisions in future realities.
</a>
<a class="SPC" href="#p114"> <!-- Sub Principle Choice -->
Turn principles into algorithms.</a>
<a class="SPC" href="#p115"> <!-- Sub Principle Choice -->
Incrementally RUD principles for 4 AoL.
</a>
<a class="SPC" href="#p116"> <!-- Sub Principle Choice -->
Practice. <i>Doing what's subj. right, using skill through principle-guided decision-making in complex systems.</i>
</a>
</div>
<h3 class="SP" id="p111"> <!-- Sub Principle -->
Find out what reality looks like through <a>The Scientific Method</a> & phenomenology of consciousness.
</h3>
<h3 class="SP" id="p112"> <!-- Sub Principle -->
<a>Find your meaning/Why</a> <i>What do you want reality to be like?</i>
</h3>
<h3 class="SP" id="p113"> <!-- Sub Principle -->
Write down principles for making decisions in future realities.
</h3>
<div class="C"> <!-- Container -->
<h4 class="pv2" id="p1131">Meta-principles make sub-principles obsolete.</h4>
<h4 class="pv2" id="p11311">Principles serve you, you don't serve them. //Plan unrigidly & keep an open mind.</h4>
<h4 class="pv2" id="p11312">Delay decisions AMA(subj.)P.</h4>
<h4 class="pv2" id="p11313">Use situational awareness in combination with more general principles as basis for decisions. //Instead of seeking order and getting pseudoorder when planning.</h4>
<h4 class="pv2" id="p11314">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.</h4>
</div>
<div class="p" id="p1132">If principle is subj. practically re-usable, Then write it down. Else embrace the subj. experience of fully being.</div>
<div class="p" id="p1133">Summarize books & experiences by principles and then transfer them to their place in the principle-hierarchy.</div>
<div class="p" id="p1134">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="C C3C"> <!-- Container 3 Columns -->
<h4 class="pv2" id="p1135">Use markers, colors and distinguishers. //To communicate with your future self.</h4>
<h4 class="pv2" id="p11351"><span class="BOLD">Bold, </span><span class="UNDERLINED">underlined</span> or <span class="MARKED">marked</span> means part of principle is important.</h4>
<h4 class="pv2" id="p11352"><span class="CURSIVE">Cursive</span> means referencing something which has a mental representation.</h4>
<h4 class="pv2" id="p11353"><span id="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 w/principle.</h4>
</div>
<div class="p" id="p1136">Use acronyms to increase efficiency of principle-CRUD.</div>
<div id="p1136Acronyms"> <!-- First jQuery/JS -->
<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 (My arbitrarily created 4 AoL are: 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 explanations to Show/Hide</p>
</div>
<div class="p" id="p1137">Minimize repeating principles, maximize referencing of principle-documents. <span class="CURSIVE">//Many principles are overlapping into other arbitrary areas of life. Made-up for the purpose of my understanding. There's no problem in making one area of life have incomplete principles, as long as you reference the meta-principle in another AoL in which relevant principles have their domain.</span></div>
<!-- Insert links to highly overlapping principle documents -->
<div class="C C3C">
<h4 class="pv2" id="p1138">Write down principles by right level of order.</h4>
<h4 class="pv2" id="p11381">Chaos accepted in AoL back-end doc</h4>
<h4 class="pv2" id="p11382">Order to 90% <span class="CURSIVE">(pseudocode)</span> in principle-docs</h4>
<h4 class="pv2" id="p11383">Order to 100% <span class="CURSIVE">(code)</span> in UI & Algos</h4>
</div>
<h3 class="SP" id="p114">Turn principles into algorithms.</h3>
<div class="p" id="p1141">If subj. RR(P)(F)-R has to be counseled in step of algorithm, Then use JS, HTML & CSS to produce pop-up box with relevant alternatives to provide algorithm with relevant info to continue until decision which can be acted out in reality is reached.</div>
<h3 class="SP" id="p115">Incrementally RUD principles for 4 AoL.</h3>
<h3 class="SP" id="p116">Practice. <i>Doing what's subj. right, using skill through principle-guided decision-making in complex systems.</i></h3>
<div class="p" id="p1161">( Apply principles in complex sub-systems of reality. )</div>
<footer>
</footer>
</body>
</html>
I can see that the jQuery is not working in this snippet, but it's working in my project so my main question is how to make JS work in my project too. Thanks.
UPDATE:
Folder structure:
CODE //Project folder
- css
- node_modules
- jQuery npm (Pseudo for loads of folders and files)
- Principles
- IntPrin
- BoostOdds.js
- index.html
- scss
- index.js //Main/Starting, server is set up here
- package.json
- package-lock.json

jQuery is working but not oneElmToggle Why you using vanila JS for this function then? Use jquery approach. It's compact and simpler:
// there is no need for inline onclick="oneElmToggle(this)" on every button
// and inline JS in no-no
$("#p1136Acronyms > button:not(#toggleAllElms)").click(oneElmToggle)
// all buttons exept one with id="toggleAllElms"
function oneElmToggle() {
$(this).next().toggle('fast')
// nextSibling
}
window.onload = function() {
$("#toggleAllElms").click(function() {
$(".toggleAcronym").toggle('fast');
});
};
* {
text-align: center;
height: auto;
padding: 10px 0;
box-sizing: border-box;
text-decoration: none;
color: black;
}
.p {
font-size: 1.5rem;
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;
}
.pv2 {
background: linear-gradient(to top left, rgb(196, 196, 196), rgb(0, 0, 0));
border-radius: 1%;
box-shadow: 0 7px 7px black;
padding: 10px 5px;
color: aliceblue;
margin: 10px 0;
}
.pv2 span {
color: white;
}
.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,
.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);
}
#IPT {
color: aliceblue;
margin-top: 0px;
}
.CMPT
/* Choose Meta Principle Title */
{
text-align: center;
border: 2px solid rgb(255, 0, 0);
width: 40%;
margin: 80px auto 0 auto;
}
.CMPC
/* Choose Meta Principle Container*/
{
list-style-type: none;
width: 90%;
margin: -10px auto 20px auto;
}
.MPC
/* Meta Principle Choice*/
{
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;
margin-top: 25px;
font-size: 2rem;
font-weight: 700;
}
.MPC:hover {
color: white;
background: linear-gradient(to top left, rgb(0, 0, 0), rgb(0, 10, 70));
}
.MP
/* Meta Principle */
{
width: 60%;
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;
font-size: 2rem;
font-weight: 700;
}
.CSP {
text-align: center;
border: 2px solid rgb(255, 0, 0);
width: 40%;
margin: 40px auto 20px auto;
}
.CSPFC {
display: flex;
justify-content: space-evenly;
flex-direction: row;
width: 98%;
margin: 0px auto 20px auto;
}
.SPC {
background-color: white;
border: 1px solid black;
border-radius: 10px;
text-align: center;
font-size: 15px;
width: 25%;
margin: 0 3px;
box-shadow: -1px 3px 3px black;
}
.SPC:hover {
background: linear-gradient(to top left, rgb(219, 7, 7), rgb(255, 238, 0));
color: black;
}
.SP {
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;
}
.C {
border: 1px solid black;
border-radius: 30%;
width: 60%;
margin: 0 auto;
display: grid;
grid-template-columns: 50% 50%;
grid-auto-rows: auto;
padding: 35px 80px;
grid-column-gap: 15px;
}
#p1131 {
border-right: 1px solid grey;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
grid-area: 1 / 1 / 2 / 3;
}
#p11311 {
background: linear-gradient(to top left, rgb(0, 0, 0), rgb(97, 97, 97));
grid-area: 2 / 1 / 3 / 2;
}
#p11312 {
grid-area: 2 / 2 / 3 / 3;
background: linear-gradient(to top right, rgb(0, 0, 0), rgb(133, 133, 133));
}
#p11313 {
grid-area: 3 / 2 / 4 / 3;
border-right: 1px solid grey;
background: linear-gradient(to top right, rgb(0, 255, 179), rgb(0, 47, 255));
font-size: .7rem;
}
#p11314 {
background: linear-gradient(to top right, rgb(255, 0, 0), rgb(158, 0, 0));
border-right: 1px solid grey;
font-size: .7rem;
grid-area: 4 / 2 / 5 / 3;
}
.C3C {
/*Container 3 Columns*/
grid-template-columns: repeat(3, 33%);
padding: 25px 80px;
}
#p1135 {
grid-area: 1 / 1 / 2 / 4;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
}
#p11351 {
grid-area: 2 / 1 / 3 / 2;
}
#p11352 {
grid-area: 2 / 2 / 3 / 3;
}
#p11353 {
grid-area: 2 / 3 / 3 / 4;
}
#p1136Acronyms {
width: 30%;
border: 1px solid black;
margin: 0 auto;
padding: 5px;
}
#p1136Acronyms button {
width: 100%;
border: 1px solid rgb(0, 0, 0);
margin: 0 auto;
padding: 10px;
background: linear-gradient(to bottom right, rgb(168, 0, 0), rgb(253, 0, 0), rgb(255, 255, 255));
color: azure;
}
#p1136Acronyms button:hover {
background: linear-gradient(to bottom right, rgb(0, 47, 255), rgb(0, 47, 255), white);
color: antiquewhite;
}
#p1136Acronyms p {
display: none;
}
#p1137 span {
color: white;
}
#p1138 {
grid-area: 1 / 1 / 2 / 4;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
}
footer {
height: 30px;
width: 100%;
background: linear-gradient(to bottom right, rgb(255, 0, 0), rgb(0, 0, 0));
position: absolute;
left: 0;
background: linear-gradient(to bottom right, rgb(0, 0, 0), red);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p" id="p1136">Use acronyms to increase efficiency of principle-CRUD.</div>
<div id="p1136Acronyms">
<!-- First jQuery/JS -->
<button>RWE</button>
<p class="toggleAcronym">Real World Example</p>
<button>CRUD</button>
<p class="toggleAcronym">Create, Read, Update, Delete</p>
<button>CNS</button>
<p class="toggleAcronym">Central Nervous System</p>
<button>MPS</button>
<p class="toggleAcronym">Muscle Protein Synthesis</p>
<button>I.e.</button>
<p class="toggleAcronym">In essence</p>
<button>ALAP</button>
<p class="toggleAcronym">As Long As Possible</p>
<button>AMAP</button>
<p class="toggleAcronym">As Much As Possible</p>
<button>CoC</button>
<p class="toggleAcronym">Contents of Consciousness</p>
<button>RR(P)(F)-R</button>
<p class="toggleAcronym">Risk Reward (Probability)(Fragility) - Ratio</p>
<button>AoL</button>
<p class="toggleAcronym">Area of Life (My arbitrarily created 4 AoL are: Intellectual, Physical, Relationships & Intellectual)</p>
<button>MBS</button>
<p class="toggleAcronym">Mind Body & Spirit</p>
<button>QoC</button>
<p class="toggleAcronym">Quality of Consciousness</p>
<button>PFC</button>
<p class="toggleAcronym">Pre-Frontal Cortex</p>
<button>SRV</button>
<p class="toggleAcronym">Survival & Reproduction Value. //(Often used to describe factors with directional effect on this.)</p>
<button>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 explanations to Show/Hide</p>
</div>
Why inline JS is bad practice.
Developer console is your friend. If something is not working - check the console. In your snippet, in addition to the error(absence of jquery link) there is one more: Cannot read property 'display' of undefined.
nextSibling isn't what you are looking for. nextElementSibling would be it. What is the difference between node.nextSibling and ChildNode.nextElementSibling
function oneElmToggle(elm) {
const sibling = elm.nextElementSibling;
if (!sibling.style.display) {
// there is no "style.display" by default so we toggle to "block" because in css we have "none"
sibling.style.display = "block";
} else {
if (sibling.style.display === "none") {
sibling.style.display = "block";
} else {
sibling.style.display = "none";
}
}
}
window.onload = function() {
$("#toggleAllElms").click(function() {
$(".toggleAcronym").toggle('fast');
});
};
* {
text-align: center;
height: auto;
padding: 10px 0;
box-sizing: border-box;
text-decoration: none;
color: black;
}
.p {
font-size: 1.5rem;
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;
}
.pv2 {
background: linear-gradient(to top left, rgb(196, 196, 196), rgb(0, 0, 0));
border-radius: 1%;
box-shadow: 0 7px 7px black;
padding: 10px 5px;
color: aliceblue;
margin: 10px 0;
}
.pv2 span {
color: white;
}
.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,
.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);
}
#IPT {
color: aliceblue;
margin-top: 0px;
}
.CMPT
/* Choose Meta Principle Title */
{
text-align: center;
border: 2px solid rgb(255, 0, 0);
width: 40%;
margin: 80px auto 0 auto;
}
.CMPC
/* Choose Meta Principle Container*/
{
list-style-type: none;
width: 90%;
margin: -10px auto 20px auto;
}
.MPC
/* Meta Principle Choice*/
{
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;
margin-top: 25px;
font-size: 2rem;
font-weight: 700;
}
.MPC:hover {
color: white;
background: linear-gradient(to top left, rgb(0, 0, 0), rgb(0, 10, 70));
}
.MP
/* Meta Principle */
{
width: 60%;
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;
font-size: 2rem;
font-weight: 700;
}
.CSP {
text-align: center;
border: 2px solid rgb(255, 0, 0);
width: 40%;
margin: 40px auto 20px auto;
}
.CSPFC {
display: flex;
justify-content: space-evenly;
flex-direction: row;
width: 98%;
margin: 0px auto 20px auto;
}
.SPC {
background-color: white;
border: 1px solid black;
border-radius: 10px;
text-align: center;
font-size: 15px;
width: 25%;
margin: 0 3px;
box-shadow: -1px 3px 3px black;
}
.SPC:hover {
background: linear-gradient(to top left, rgb(219, 7, 7), rgb(255, 238, 0));
color: black;
}
.SP {
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;
}
.C {
border: 1px solid black;
border-radius: 30%;
width: 60%;
margin: 0 auto;
display: grid;
grid-template-columns: 50% 50%;
grid-auto-rows: auto;
padding: 35px 80px;
grid-column-gap: 15px;
}
#p1131 {
border-right: 1px solid grey;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
grid-area: 1 / 1 / 2 / 3;
}
#p11311 {
background: linear-gradient(to top left, rgb(0, 0, 0), rgb(97, 97, 97));
grid-area: 2 / 1 / 3 / 2;
}
#p11312 {
grid-area: 2 / 2 / 3 / 3;
background: linear-gradient(to top right, rgb(0, 0, 0), rgb(133, 133, 133));
}
#p11313 {
grid-area: 3 / 2 / 4 / 3;
border-right: 1px solid grey;
background: linear-gradient(to top right, rgb(0, 255, 179), rgb(0, 47, 255));
font-size: .7rem;
}
#p11314 {
background: linear-gradient(to top right, rgb(255, 0, 0), rgb(158, 0, 0));
border-right: 1px solid grey;
font-size: .7rem;
grid-area: 4 / 2 / 5 / 3;
}
.C3C {
/*Container 3 Columns*/
grid-template-columns: repeat(3, 33%);
padding: 25px 80px;
}
#p1135 {
grid-area: 1 / 1 / 2 / 4;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
}
#p11351 {
grid-area: 2 / 1 / 3 / 2;
}
#p11352 {
grid-area: 2 / 2 / 3 / 3;
}
#p11353 {
grid-area: 2 / 3 / 3 / 4;
}
#p1136Acronyms {
width: 30%;
border: 1px solid black;
margin: 0 auto;
padding: 5px;
}
#p1136Acronyms button {
width: 100%;
border: 1px solid rgb(0, 0, 0);
margin: 0 auto;
padding: 10px;
background: linear-gradient(to bottom right, rgb(168, 0, 0), rgb(253, 0, 0), rgb(255, 255, 255));
color: azure;
}
#p1136Acronyms button:hover {
background: linear-gradient(to bottom right, rgb(0, 47, 255), rgb(0, 47, 255), white);
color: antiquewhite;
}
#p1136Acronyms p {
display: none;
}
#p1137 span {
color: white;
}
#p1138 {
grid-area: 1 / 1 / 2 / 4;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
}
footer {
height: 30px;
width: 100%;
background: linear-gradient(to bottom right, rgb(255, 0, 0), rgb(0, 0, 0));
position: absolute;
left: 0;
background: linear-gradient(to bottom right, rgb(0, 0, 0), red);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p" id="p1136">Use acronyms to increase efficiency of principle-CRUD.</div>
<div id="p1136Acronyms">
<!-- First jQuery/JS -->
<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 (My arbitrarily created 4 AoL are: 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 explanations to Show/Hide</p>
</div>
<div class="p" id="p1137">Minimize repeating principles, maximize referencing of principle-documents. <span class="CURSIVE">//Many principles are overlapping into other arbitrary areas of life. Made-up for the purpose of my understanding. There's no problem in making one area of life have incomplete principles, as long as you reference the meta-principle in another AoL in which relevant principles have their domain.</span></div>
<!-- Insert links to highly overlapping principle documents -->
<div class="C C3C">
<h4 class="pv2" id="p1138">Write down principles by right level of order.</h4>
<h4 class="pv2" id="p11381">Chaos accepted in AoL back-end doc</h4>
<h4 class="pv2" id="p11382">Order to 90% <span class="CURSIVE">(pseudocode)</span> in principle-docs</h4>
<h4 class="pv2" id="p11383">Order to 100% <span class="CURSIVE">(code)</span> in UI & Algos</h4>
</div>
<h3 class="SP" id="p114">Turn principles into algorithms.</h3>
<div class="p" id="p1141">If subj. RR(P)(F)-R has to be counseled in step of algorithm, Then use JS, HTML & CSS to produce pop-up box with relevant alternatives to provide algorithm with relevant info to continue until decision which can be acted out in reality is reached.</div>
<h3 class="SP" id="p115">Incrementally RUD principles for 4 AoL.</h3>
<h3 class="SP" id="p116">Practice. <i>Doing what's subj. right, using skill through principle-guided decision-making in complex systems.</i></h3>
<a href="">
<div class="p" id="p1161">( Apply principles in complex sub-systems of reality. )</div>
</a>
<footer>
</footer>
</body>
</html>

I'm struggling to get this jquery slide down and up to work

The div I'm animating in jquery is supposed to slide out to expand the width. I've gotten the width animation to work but after adding the slideDown and up code nothing works, the way it should work is:
Enquiries should be clicked and it expands and after it expands the. For slides down and when its clicked again, first the fork slides up and then the ENQUIRIES- shown goes back to its original width.
I'm not sure where my codes gone wrong as I'm new to jquery and java script. THANK YOU FOR ANY HELP!
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
$(this).animate({
width: "950px",
borderRadius: "0px"
}, 1000);
setTimeout(function() {
$('#enquiry-form').slideDown('slow');
}, 1000);
function() {
if ($('#enquiry-form').is("visible") {
$('#enquiry-form').slideUp("slow");
else($('#enquiry-form').is("hidden") {
$('#enquiry-form ').slideDown("slow");
});
});
};
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 10px 19px 0 0;
display: inline-block;
}
#enquiry-form {
width: 950px;
height: 400px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
</div>
</div>

I changed i few things in your js code, i used a class to define the condition when to slideup or down
See the result:
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
var current = $(this)
if ($('#enquiry-shown').hasClass("active")) {
$('#enquiry-form').slideUp('slow', function() {
current.animate({
width: "210px",
borderRadius: "50px"
}, 1000);
});
$('#enquiry-shown').removeClass("active");
} else {
current.animate({
width: "100%",
borderRadius: "0px"
}, 1000, function() {
$('#enquiry-form').slideDown('slow');
});
$('#enquiry-shown').addClass("active");
}
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 0px 20px 0 0;
display: inline-block;
transition: all 1s;
transform: rotate(-90deg);
}
#enquiry-form {
width: 100%;
height: 100px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
#enquiry-shown.active img {
transform: rotate(0deg);
padding-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
This is the enquiry form
</div>
</div>

I don't know if u want to achieve this effect, but try this and give me feedback:
$('#enquiry-shown').click(function() {
if($('#enquiry-form').is(':visible')){
$('#enquiry-form').slideUp('slow', function(){
$('#enquiry-shown').animate({
width: "210px",
borderRadius: "50px"
}, 1000);
});
}
else if($('#enquiry-form').is(':hidden')){
$('#enquiry-shown').animate({
width: "950px",
borderRadius: "0px"
}, 1000, function(){
$('#enquiry-form').slideDown('slow');
});
}
});

You have a lot of syntax errors such as incorrectly matched brackets, missing parenthesis, missing function name, and using else when you should use else if.
When you fix all of them it looks like your click function already has some of your intended functionality.
Next I'd suggest removing the setTimeout in favor of jQuery's animate end handler, which you use by attaching a function to most animations.
Lastly you should refactor your code a little. I don't think is('visible') does what you think it does, but luckily there's a slideToggle method that does do what you want pretty easily.
Your click handler then needs to consider cases when the menu is already open and when it's not open and then act accordingly. For that you might consider using toggleClass and then checking which class it is with hasClass before deciding what animation to perform.
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
if(!$(this).hasClass('closed')){ // if the form is not closed
$(this).animate({ // animate the form to open state
width: "950px",
borderRadius: "0px",
}, 1000, ()=>{
$("#enquiry-form").slideToggle()
});
}else{ // if the form is closed animate in reverse order
$("#enquiry-form").slideToggle(
()=>{
$(this).animate({
width : "210px",
borderRadius : "50px"
}, 1000);
}
)
}
$(this).toggleClass('closed'); // toggle the class
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 10px 19px 0 0;
display: inline-block;
}
#enquiry-form {
width: 950px;
height: 400px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
<div> Hello I am a form </div>
</div>
</div>

Jquery Sparkle effect not working

I am having a sparkle effect in jquery but the sparkle is working on background is there anyway i can get those sparkle on image and not on background.
Here is my code:
(function () {
var sparkle = new Sparkle();
sparkle.init('.summs');
})();
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
a{background:transparent}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
img{border:0}
svg:not(:root){overflow:hidden}
code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}
b,strong,optgroup{font-weight:700}
pre,textarea{overflow:auto}
html {
height: 100%;
}
body {
color: #AAA;
background-color: #000;
line-height: 1.4;
margin: 50px;
}
h1 {
color: #FFF;
}
h2 {
padding: 10px 0;
border-bottom: 1px solid #444;
}
a {
color: inherit;
}
em {
font-family: monospace;
font-size: 16px;
font-style: normal;
background-color: #333;
border-radius: 3px;
padding: 3px 5px;
}
pre {
color: #FFF;
background-color: #444;
padding: 0 25px;
border-radius: 3px;
}
#wrapper {
width: 20%;
margin: auto;
border:red solid 1px
}
div.summs {
background: rgba(0, 0, 0, 0) url("https://custom.cvent.com/9BC2D0988F874B5C8C15E9D14B6E2F3B/pix/21abaeaeb5d94c73b6814e90cf55d240.jpg") no-repeat scroll center top;
height: 516px;
margin: 0 auto;
position: relative;
text-align: center;
top: -40px;
width: 1000px;
}
<script src="https://s3-us-west-1.amazonaws.com/creative-event/sparkle-effect/sparkle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="summs">
<div class="onslide2">
<h1 class="bold"><strong>Sparkling Beauty Sparkling Service</strong></h1>
<br>
<br>
<h1 class="l2">GALA DINNER<br>
Sparkling Dior Ambassadress</h1>
<h1 class="l3">26<sup>th</sup> May 2016<br>
JW Marriott Hotel, Macau</h1>
<h1 class="l4">Dress Code: Rose Gold and Champagne </h1>
<h2>Remember to bring your sparkling outfit.<br>
There will be a prize for best-dressed.</h2>
</div>
</div>
Fiddle
I am sorry I don't know how make it a link here. Request you to please copy the url and paste.
need help

I created this myself. Would be nice if you gave me credits somewhere if you use this. But hey, you do what you want.
https://jsfiddle.net/virginieLGB/mL6uf3xm/5/
Only thing you need to change is
mySparkle.init( $( ".summs" ) , 150 );
I guess you'll want to keep the element here, but you can change '150' with any number of stars you want.
Have fun

move div item on top of div container when being onclicked

!http://postimg.org/image/ym5xp7ilv/
what i would like to achieve is to move the div item which is clicked on the top of the div container when each item is clicked...the rest of the items(those who are not being clicked) would fill the rest of the div container respectively
HTML
<div class="row">
<div class="col-md-12">
<div class="containing_div">
<div class="container_div"></div>
<div class="menu_div">
<div class="item_div">Photos</div>
<div class="item_div">Video</div>
<div class="item_div">Music</div>
<div class="item_div">Files</div>
<div class="item_div">Contacts</div>
</div>
</div>
</div>
</div>
CSS
.containing_div
{
height: 100%;
}
.container_div
{
background: #fff;
height: 100%;
width: 90%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
text-align: center;
font-family: "Open Sans";
font-size: 26px;
float: left;
padding-top: 25px;
position: relative;
}
.menu_div
{
background: transparent;
float: left;
}
.item_div
{
background: #ddd;
height: 80px;
color: #bbb;
font-family: "Open Sans";
font-size: 16px;
font-weight: 300;
margin-bottom: 10px;
text-align: center;
padding: 8px;
border-radius: 0 2% 2% 0;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
cursor: pointer;
cursor: hand;
}

If I correctly understood what you desire, you can achieve your target with a little of jQuery, thanks to prependTo method.
Here the working example and the jQuery function.
$('.item_div').on('click',function(){
$(this).prependTo('.container_div');
});
UPDATE:
If you want to simply swap positions, here a variation.
$('.item_div').on('click',function(){
$(this).prependTo('.menu_div');
});

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;
}