Develop Reference

Toggle text inserted with innerHTML from Javascript

As an exercise I am trying to create a small quiz app and a part of it are the question cards. On these cards I have a question and then a button to show the answer. When the button is clicked, then the answer (which doesn't exist in the HTML DOM yet, therefore not visible) will show up and with the next click, the answer should be hidden again. Basically it will look something like this:
Before Show Answer is clicked
After Show Answer is clicked
Here is the HTML code:
<section class="question-card">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam vitae
labore repudiandae tenetur. Qui maiores animi quibusdam voluptatum
nobis. Nam aperiam voluptatum dolorem quia minima assumenda velit libero
saepe repellat. Tempore delectus deleniti libero aliquid rem velit illum
expedita nostrum quam optio maiores officiis consequatur ea, sint enim
cum repudiandae inventore ab nemo?
</p>
<div class="bookmark">
<i class="fa-regular fa-bookmark fa-lg"></i>
</div>
<button class="answer-button" data-js="answer-button">Show Answer</button>
<ul class="answer-container" data-js="answer-container">
</ul>
<div class="container-categories">
<button class="category-button category-html">#html</button>
<button class="category-button category-flexbox">#flexbox</button>
<button class="category-button category-css">#css</button>
<button class="category-button category-js">#js</button>
</div>
</section>
I have added an EventListener for the Show Answer button that adds a list item in the already existing ul when it is clicked. I have done this with innerHTML:
const answerButton = document.querySelector(".answer-button");
const answerContainer = document.querySelector(".answer-container");
const answer1 = "Lorem ipsum dolor sit amet consectetur adipisicing elit.";
answerButton.addEventListener("click", () => {
answerContainer.innerHTML = `<li class="show-answer">${answer1}</li>`;
});
Now what I can't seem to manage is to hide the answer when the button is clicked again (the next challenge will be that the button will change the text to "Hide Answer" after the first click, but I have no idea how to approach that yet). The closest I got was this:
answerButton.addEventListener("click", () => {
answerContainer.innerHTML = `<li class="show-answer">${answer1}</li>`;
answerContainer.classList.toggle("hide-answer");
});
However, this method displays the .hide-answer class first, after which the 2 classes are toggled and everything is as it should be. So after the first click, the answer is still hidden and only after the 2nd click the button behaves the way I want it to.
I have tried this as well:
answerButton.addEventListener("click", () => {
answerContainer.innerHTML = `<li class="hide-answer">${answer1}</li>`;
answerContainer.classList.toggle("show-answer");
});
But for some reason this shows the container with all the CSS properties, but there is no text:
Answer Container is there, but no text
This is the CSS for the 2 classes (show-answer and hide-answer):
.show-answer {
background-color: hotpink;
border-radius: 7px;
border: none;
list-style: none;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px;
}
.hide-answer {
display: none;
}
If anybody has any idea how I could get the result I need, I would be extremely grateful...

You're mixing up the answer-container with the answer-container's child (the innerHtml <li> element).
initially there's a visible, but empty <ul class="answer-container"></ul>.
Next on click of the button, you add the content into the answer-container expecting it to be visible with a show-answer class
Immediately after, you add the hide-answer class to the <ul class="answer-container"> parent element which hides the newly added content.
Click the button again and you finally see your answer because the container element has the hide-answer class toggled off. From here it works as you're expecting.
You can fix this by having the answer-container be hidden initially and then continue to toggle the display of the container. You can also just use a DOM element's hidden attribute to do this as I do in this code snippet below where I've taken your exact example and just modified the answer-container to start with hidden and toggle the hidden attribute on click. You can do the same thing w/ a CSS display: none class too.
const answerButton = document.querySelector(".answer-button");
const answerContainer = document.querySelector(".answer-container");
const answer1 = "Lorem ipsum dolor sit amet consectetur adipisicing elit.";
answerButton.addEventListener("click", () => {
answerContainer.innerHTML = `<li class="answer">${answer1}</li>`;
answerContainer.hidden = !answerContainer.hidden;
});
.answer {
background-color: hotpink;
border-radius: 7px;
border: none;
list-style: none;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<section class="question-card">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam vitae
labore repudiandae tenetur. Qui maiores animi quibusdam voluptatum
nobis. Nam aperiam voluptatum dolorem quia minima assumenda velit libero
saepe repellat. Tempore delectus deleniti libero aliquid rem velit illum
expedita nostrum quam optio maiores officiis consequatur ea, sint enim
cum repudiandae inventore ab nemo?
</p>
<div class="bookmark">
<i class="fa-regular fa-bookmark fa-lg"></i>
</div>
<button class="answer-button" data-js="answer-button">Show Answer</button>
<ul class="answer-container" hidden data-js="answer-container">
</ul>
<div class="container-categories">
<button class="category-button category-html">#html</button>
<button class="category-button category-flexbox">#flexbox</button>
<button class="category-button category-css">#css</button>
<button class="category-button category-js">#js</button>
</div>
</section>

Would something like this work?
You just use if the container has the class show-answer to determine if the answer needs to be shown or hidden
answerButton.addEventListener("click", () => {
if (answerContainer.classList.contains('show-answer')) {
// container has `showing` class
// hide the answer
answerContainer.innerHTML = ``; // ? - my guess, not sure how to want to hide it
}else{
// container doesn't have `showing` class
// show the answer
answerContainer.innerHTML = `<li class="hide-answer">${answer1}</li>`;
};
// update class
answerContainer.classList.toggle("show-answer");
});

SVG Drawing Function Is Messing Up

So, I'm trying to do this animation where I can carousel through the content on this page in a slideshow/multi-step form kind of manner. That's working pretty good. However, I have this SVG drawing function that I want to call for each specific "slide", when the transfer function has happened. So transfer forward to section or backwards to section has happened, the specific SVG for that section is drawn.
But my svg function is messing up - maybe all of it is?
I don't know. I'm a newbie, so please be nice to me about my code - even if it's not great.
Also, I included a big chunk of code so thank you to whoever reads through this. Love you in advance :).
const multiStepForm = document.querySelector("[data-multi-step]");
const formSteps = [...multiStepForm.querySelectorAll("[data-step]")];
let currentStep = formSteps.findIndex(step => {
return step.classList.contains('active')
});
if(currentStep < 0) {
currentStep = 0;
showCurrentStep();
};
multiStepForm.addEventListener('click', e => {
let incrementor
if (e.target.matches("[data-next]")) {
incrementor = 1
} else if (e.target.matches("[data-previous]")){
incrementor = -1
}
if(incrementor == null) return
if(e.target.matches("[data-next]")){
currentStep += incrementor
showCurrentStep()
} else if (e.target.matches("[data-previous]")) {
currentStep += incrementor
showCurrentStep()
}
});
formSteps.forEach(step => {
step.addEventListener('animationend', e => {
formSteps[currentStep].classList.remove('hide')
e.target.classList.toggle('hide', !e.target.classList.contains('active'))
})
})
function writeSignature(totalDur, paths){
// get all SVG elements - lines and dots
const linePaths = document.querySelectorAll(paths);
// reset the animation
linePaths.forEach((linePath) => {
linePath.classList.remove('animated')
})
// escape if no element is found
if(!linePaths.length){
return false;
};
// set animation duration to default if not set
const totalDuration = totalDur || 7;
linePaths.forEach((linePath) => {
const pathElem = linePath;
// get current path length
const pathLength = linePath.getTotalLength();
// set animation duration and delay
pathElem.style.animationDuration = `${totalDuration}s`;
// set dash array and offset to path length - to hide the path
linePath.setAttribute('stroke-dasharray', pathLength);
linePath.setAttribute('stroke-dashoffset', pathLength);
});
// set 'animated' class to body which will start the animation
linePaths.forEach((linePath) => {
linePath.classList.add('animated')
});
return true;
};
function showCurrentStep() {
formSteps.forEach((step,index) => {
step.classList.toggle('active', index === currentStep)
if(step.classList.contains('systems')){
writeSignature(2.5, '.system-path');
} else if(step.classList.contains('socials')){
writeSignature(2.5, '.social-path');
} else if(step.classList.contains('web')){
writeSignature(2.5, '.web-path');
}
});
};
.main-content {
width: 75vw;
height: 75vh;
margin: auto;
position: relative;
}
.main-content-svc{
background:#3244AB;
}
.steps-container {
width: 100%;
height: 100%;
}
.multi-step-container {
padding: 0;
margin: 0;
overflow: hidden;
position: relative;
height: 100%;
width: 100%;
}
.step {
position: relative;
height: 100%;
width: 100%;
list-style: none;
cursor: pointer;
animation: fade 250ms ease-in-out forwards;
}
.systems-info, .social-info, .web-info{
width: 60%;
display: grid;
grid-template-columns: auto auto auto auto;
gap: 40px ;
padding: 25px;
}
.social-info h2, .social-intro,
.systems-info h2, .systems-intro,
.web-info h2, .web-intro{
text-align: center;
}
.social-paras, .systems-paras, .web-paras {
display: inline-flex;
}
.social-info h2, .systems-info h2, .web-info h2 {
grid-column-start: 1;
grid-column-end: 5;
}
.social-intro, .systems-intro, .web-intro {
grid-column-start: 1;
grid-column-end: 5;
}
.social-para1, .social-para3,
.systems-para1, .systems-para3,
.web-para1, .web-para3 {
grid-column-start: 1;
grid-column-end: 3;
}
.social-para2, .social-para4,
.systems-para2, .systems-para4,
.web-para2, .web-para4 {
grid-column-start: 3;
grid-column-end: 5;
}
#system-svgs {
width: 500px;
position: absolute;
right: -10%;
top: 10%;
}
#web-svgs {
width: 500px;
position: absolute;
right: 0;
top: 5%;
}
.twitter-lines {
position: absolute;
right: 10%;
bottom: 15%;
}
.facebook-lines {
position: absolute;
right: 20%;
top: 12%;
}
.pinterest-lines {
position: absolute;
right: 5%;
top: 5%;
}
#services-pg path {
animation-timing-function: linear;
animation-fill-mode: forwards;
}
.animated {
animation-name: writeSVG;
}
.buttons {
width: 100%;
text-align: center;
position: absolute;
left: 0;
bottom: 2%;
display: inline-block;
margin: 5px;
}
.buttons button {
background-color: transparent;
border: none;
}
.step.active {
animation: slide 250ms 250ms ease-in-out both;
}
.hide {
display: none;
}
#keyframes writeSVG {
100% {
stroke-dashoffset: 0;
}
}
#keyframes slide {
0% {
transform: translateX(200%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
#keyframes fade {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(0.75);
opacity: 0;
}
100% {
transform: scale(0);
opacity: 0;
}
}
<main id="svc-container" class="main-content main-content-svc">
<div class="steps-container">
<ul data-multi-step class="multi-step-container">
<li id="systems" class="active step systems" data-step>
<div class="systems-info">
<h2>Systems</h2>
<p class="systems-intro">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, quis. Officia nam dignissimos quae, provident architecto consequatur similique, maxime quos voluptate aspernatur iure qui dolore velit nihil excepturi sequi cumque. Asperiores inventore, provident libero.</p>
<div class="systems-paras systems-para1">
<h4>1)</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, quis. Officia nam dignissimos quae, provident architecto consequatur similique, maxime quos voluptate.</p>
</div>
<div class="systems-paras systems-para2">
<h4>2)</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, quis. Officia nam dignissimos quae, provident architecto consequatur similique, maxime quos voluptate aspernatur.</p>
</div>
<div class="systems-paras systems-para3">
<h4>3)</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, quis. Officia nam dignissimos quae, provident architecto consequatur similique.</p>
</div>
<div class="systems-paras systems-para4">
<h4>4)</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, quis. Officia nam dignissimos quae, provident architecto consequatur similique.</p>
</div>
</div>
<div id="system-svgs">
<svg
class="gears"
version="1.1"
viewBox="10 30 40 65"
height="500px"
width="500px">
<g>
<path
class="system-path"
d="m 13.284612,59.22312 c -3.769554,0.0069 -5.504936,2.172975 -5.822185,4.820917 -0.270219,2.530855 1.764121,5.724608 5.043422,5.748017 8.288379,0.261994 7.743937,-10.409386 0.778763,-10.568934 z m 0.112676,17.376856 -3.689262,-0.322894 0.35566,-3.648968 C 9.511117,72.492687 8.940024,72.335648 7.806573,71.522526 L 4.887021,73.848285 2.502685,71.16152 5.279688,68.949221 C 4.683138,68.134826 4.413308,67.451118 4.309992,66.834016 L 0.325907,66.958484 0.203642,63.450079 4.050129,63.32984 c -0.03987,-0.562853 0.146358,-1.261368 0.600855,-2.120843 l -3.166947,-2.110354 2.131431,-2.8713 3.115091,2.075859 c 0.83433,-0.956181 1.451323,-1.151682 2.095643,-1.442827 l -1.114617,-3.762509 3.567131,-0.948651 1.109063,3.743719 c 0.639522,-0.02774 0.890155,-0.196898 2.540998,0.143113 l 1.693704,-3.680101 3.39612,1.403109 -1.693669,3.680101 c 0.893449,0.59492 1.443027,1.189839 1.946424,1.784759 l 3.561731,-1.514035 1.516606,3.202754 -3.458795,1.470261 c 0.22664,0.730152 0.433222,1.465318 0.271919,2.292456 l 3.703698,0.947806 -0.96611,3.389011 -3.569731,-0.913651 c -0.332382,0.786544 -0.690051,1.573088 -1.700462,2.359632 l 2.207297,3.09999 -3.071288,1.963345 -2.190881,-3.076837 c -1.230003,0.498413 -2.097299,0.634118 -2.835485,0.640714 z"
style="fill:none;stroke:#4cf5e1;stroke-width:0.5;opacity:1;"/>
<path
class="system-path"
d="m 14.354871,39.21616 c -2.709478,-1.447135 -4.730714,-0.543226 -5.906005,1.256879 -1.099582,1.733252 -0.781496,4.835506 1.565052,6.115827 5.858287,3.383243 9.285683,-4.573592 4.340953,-7.372706 z M 8.218108,51.874629 5.68432,50.218954 7.245368,47.706922 C 6.897007,47.395744 6.543091,47.061718 6.020087,46.034763 L 3.091316,46.598454 2.340444,43.729393 5.126248,43.193156 c -0.136984,-0.821037 -0.08612,-1.42134 0.0605,-1.909138 l -2.90558,-1.44447 1.167551,-2.594098 2.805255,1.394544 c 0.172752,-0.42398 0.556427,-0.859337 1.190352,-1.308191 L 5.925197,34.579705 8.483205,33.316351 9.977438,36.02343 c 0.941282,-0.372739 1.454309,-0.276974 2.021181,-0.240118 l 0.54585,-3.160864 2.901063,0.685525 -0.543117,3.145083 c 0.469174,0.226236 0.709689,0.199988 1.773531,1.082795 l 2.533069,-2.019146 1.936765,2.326942 -2.53305,2.019166 c 0.428738,0.77609 0.610526,1.419702 0.759153,2.045525 l 3.099486,0.272993 -0.05688,2.909364 -3.009904,-0.265115 c -0.0985,0.617378 -0.213207,1.230669 -0.625,1.769007 l 2.320552,2.114901 -1.906416,2.088132 -2.236566,-2.038498 c -0.520128,0.442957 -1.058417,0.876176 -2.065445,1.05793 l 0.47588,3.100841 -2.908057,0.242134 -0.472377,-3.077709 C 10.925532,49.970285 10.254154,49.734696 9.721688,49.455103 Z"
style="fill:none;stroke:#4cf5e1;stroke-width:0.5;opacity:1;"/>
<path
class="system-path"
d="m 28.625511,48.835168 c -2.229634,-0.294553 -3.430783,0.847615 -3.832237,2.386691 -0.364191,1.473635 0.580861,3.52139 2.518148,3.794952 4.880085,0.81124 5.419984,-5.535723 1.314089,-6.181643 z m -1.336771,10.27385 -2.155528,-0.482945 0.505015,-2.127362 C 25.322409,56.37495 24.997382,56.236945 24.392798,55.666839 l -1.914281,1.142642 -1.192961,-1.775985 1.820822,-1.086908 c -0.286991,-0.528331 -0.391333,-0.953587 -0.402589,-1.326306 l -2.365999,-0.242042 0.211053,-2.082183 2.284289,0.233628 c 0.02191,-0.335646 0.188419,-0.733527 0.526596,-1.205243 l -1.702303,-1.497472 1.49229,-1.527327 1.674426,1.472987 c 0.570595,-0.498756 0.951237,-0.565376 1.355762,-0.68633 l -0.355249,-2.310886 2.186002,-0.27786 0.353481,2.299348 c 0.380419,0.0342 0.542286,-0.0458 1.491032,0.285806 l 1.298769,-2.039778 1.894943,1.097839 -1.298749,2.039776 c 0.480285,0.422199 0.757224,0.817161 1.006855,1.208465 l 2.228469,-0.612273 0.638167,2.012064 -2.164064,0.594569 c 0.07505,0.449269 0.137833,0.899911 -0.02434,1.375747 l 2.113596,0.853238 -0.845006,1.925453 -2.037133,-0.822454 c -0.260075,0.438303 -0.535101,0.874607 -1.19612,1.259208 l 1.054898,2.006066 -1.974738,0.916536 -1.047062,-1.991089 c -0.767602,0.197003 -1.291427,0.208474 -1.728479,0.153902 z"
style="fill:none;stroke:#4cf5e1;stroke-width:0.5;opacity:1;"/>
</g>
</svg>
</div>
<div class="buttons">
<button type="button" data-next>Socials &rightarrow;</button>
</div>
</li>
<li id="socials" class="step socials" data-step>
<div class="social-info">
<h2>Socials</h2>
<p class="social-intro">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, quis. Officia nam dignissimos quae, provident architecto consequatur similique, maxime quos voluptate aspernatur iure qui dolore velit nihil excepturi sequi cumque. Asperiores inventore, provident libero.</p>
<div class="social-paras social-para1">
<h4>1)</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, quis. Officia nam dignissimos quae, provident architecto consequatur similique, maxime quos voluptate.</p>
</div>
<div class="social-paras social-para2">
<h4>2)</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, quis. Officia nam dignissimos quae, provident architecto consequatur similique, maxime quos voluptate aspernatur.</p>
</div>
<div class="social-paras social-para3">
<h4>3)</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, quis. Officia nam dignissimos quae, provident architecto consequatur similique.</p>
</div>
<div class="social-paras social-para4">
<h4>4)</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, quis. Officia nam dignissimos quae, provident architecto consequatur similique.</p>
</div>
</div>
<div id="social-svgs">
<svg
class="twitter-lines"
version="1.1"
viewBox="850 -750 850 850"
height="250px"
width="250px">
<g>
<path
class="social-path"
d="M 1371.638,73.267145 C 1282.6632,22.881521 1106.9129,2.561158 970.86717,92.585006 c 77.31223,-9.378131 150.07103,0.994385 212.10653,57.880064 -111.4902,15.3279 -124.9095,72.0454 -138.2829,97.77243 23.7585,-0.63766 47.5168,-1.70582 71.2752,1.66802 -117.79397,38.56527 -117.01177,140.09919 -117.01177,140.09919 20.65097,-7.19842 40.39617,-16.36068 64.68037,-15.67906 -74.62377,63.10602 -75.21977,129.29951 -50.7356,196.53897 67.6896,-77.57075 148.9319,-143.78545 300.052,-151.44828 -24.0681,68.11848 91.7053,264.05661 242.5268,131.98727 25.9132,-7.82476 55.0522,12.33458 84.7542,37.37698 -7.0544,-30.76945 -6.1736,-62.11256 -68.4795,-88.88787 23.0316,2.70904 34.8831,-9.73587 86.3971,31.57969 -4.5985,-20.69531 -9.83,-49.22123 -56.3749,-69.87587 C 1603.3326,234.22266 1448.2495,107.3751 1371.638,73.267145 Z"
style="fill:none;stroke:#4cf5e1;stroke-width:8;opacity:1;"
transform="scale(1,-1)"/>
</g>
</svg>
<svg
class="facebook-lines"
version="1.1"
viewBox="950 -400 350 350"
height="250px"
width="250px">
<g>
<path
class="social-path"
d="m 1185.4417,352.252 c -44.0308,-2.93942 -101.1573,17.27671 -93.0549,-92.7576 h -39.5234 v -45.95715 h 39.5234 v -111.4893 l 45.0653,0.1032 1.0479,111.3861 h 43.6481 V 259.4944 H 1138.5 c -1.2058,61.05759 4.347,49.63388 46.9417,50.07997 V 352.252"
style="fill:none;stroke:#4cf5e1;stroke-width:3.5;opacity:1;"
transform="scale(1,-1)"/>
</g>
</svg>
<svg
class="pinterest-lines"
version="1.1"
viewBox="1000 -475 450 450"
height="250px"
width="250px">
<g>
<path
class="social-path"
d="m 1163.8809,110.83362 c -8.5615,-4.76259 -9.0546,17.97745 -12.8107,29.59485 1.5189,40.39107 19.7671,73.33812 24.3142,116.2338 -26.2638,59.88131 14.5762,86.97703 43.8842,84.21015 34.0357,-15.71279 1.2869,-68.27225 -5.9303,-106.74525 -7.607,-27.66551 37.4846,-41.47442 59.3029,-26.68637 73.4249,50.7141 26.9472,170.56116 -34.9887,166.64129 -76.3165,3.81259 -86.9575,-55.15298 -93.1057,-77.09384 -0.5338,-43.63739 18.4588,-31.04584 16.6049,-69.38443 -20.558,-4.54562 -40.4012,39.87221 -36.7679,74.1287 15.8015,101.49563 89.5039,98.80371 95.4778,100.81501 145.8932,0.59738 173.0445,-185.86557 51.5935,-224.75821 -35.3925,-6.01894 -54.291,9.53415 -68.0339,23.0914 -6.4287,-43.5186 -25.9041,-82.88567 -39.5403,-90.0471 z"
style="fill:none;stroke:#4cf5e1;stroke-width:4;opacity:1;"
transform="scale(1,-1)"/>
</g>
</svg>
</div>
<div class="buttons">
<button type="button" data-previous>&leftarrow; Systems </button>
<button type="button" data-next>Web &rightarrow;</button>
</div>
</li>
<li id="web" class="step web" data-step>
<div class="web-info">
<h2>Web</h2>
<p class="web-intro">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, quis. Officia nam dignissimos quae, provident architecto consequatur similique, maxime quos voluptate aspernatur iure qui dolore velit nihil excepturi sequi cumque. Asperiores inventore, provident libero.</p>
<div class="web-paras web-para1">
<h4>1)</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, quis. Officia nam dignissimos quae, provident architecto consequatur similique, maxime quos voluptate.</p>
</div>
<div class="web-paras web-para2">
<h4>2)</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, quis. Officia nam dignissimos quae, provident architecto consequatur similique, maxime quos voluptate aspernatur.</p>
</div>
<div class="web-paras web-para3">
<h4>3)</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, quis. Officia nam dignissimos quae, provident architecto consequatur similique.</p>
</div>
<div class="web-paras web-para4">
<h4>4)</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, quis. Officia nam dignissimos quae, provident architecto consequatur similique.</p>
</div>
</div>
<div id="web-svgs">
<svg
class="web-build"
version="1.1"
viewBox="-15 -25 175 175"
height="500px"
width="500px">
<g>
<path
class="web-path"
d="M 60.647144,112.82787 C 65.305556,104.58148 45.282102,73.931698 35.075129,51.835166 l -8.46641,3.628462 c 8.757646,15.108739 29.083175,62.837452 34.038425,57.364242 z"
style="fill:none;stroke:#4cf5e1;stroke-width:1;opacity:1;"/>
<path
class="web-path"
d="M 25.053664,53.563005 16.068902,29.546045 C 0.56706111,31.526934 9.1250601,19.272702 0,0 11.54679,19.242498 26.096809,12.560767 19.697363,27.299854 L 33.692858,49.76176 Z"
style="fill:none;stroke:#4cf5e1;stroke-width:1;opacity:1;"/>
<path
class="web-path"
d="M 73.433152,29.546045 V 42.159269 L 62.720551,46.997217 73.77872,52.180734 73.605936,65.485093 44.405459,47.342785 Z"
style="fill:none;stroke:#4cf5e1;stroke-width:1;opacity:1;"/>
<path
class="web-path"
d="M 102.63363,8.1208427 112.65509,8.2936266 86.564728,84.664105 H 75.852127 Z"
style="fill:none;stroke:#4cf5e1;stroke-width:1;opacity:1;"/>
<path
class="web-path"
d="M 114.21015,29.546045 141.68279,46.65165 113.51901,65.657877 V 52.00795 l 11.23096,-5.529084 -10.88539,-5.529085 z"
style="fill:none;stroke:#4cf5e1;stroke-width:1;opacity:1;"/>
</g>
</svg>
</div>
<div class="buttons">
<button type="button" data-previous>&leftarrow; Socials</button>
</div>
</li>
</ul>
</div>
</main>

Spacing between long amount of text lines css/html/js

Let's say that i have lots of text that i dont want to be in one single huge line, how could i put some white spacings after a certain amount of words? And should i do this in the CSS file or somewhere else?
So for example: this: "You have succesfully looted the house, as the house was empty you didnt run into any trouble." to: "You have succesfully looted the house, as the house was empty you
didnt run into any trouble."
Might not look as great on this site but i think you will get the idea. The string is empty at first and will be filled by some action that happens on the page.

Specify a width on the container where your text is inside. It is better to use the max-width property since your text may be smaller than the maximal width you want. In this case it is not essential though, since the paragraph is a block element and is full width.
p {
border: 1px solid lightcoral;
}
.ch-wrap {
max-width: 60ch;
}
.px-wrap {
max-width: 200px;
}
<h1>This has no width set</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, doloremque nihil. Illo, veritatis est ipsa cumque culpa praesentium dolor error.</p>
<h1>This has a width of 60 characters</h1>
<p class="ch-wrap">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, doloremque nihil. Illo, veritatis est ipsa cumque culpa praesentium dolor error.</p>
<h1>This has a width of 200px set</h1>
<p class="px-wrap">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, doloremque nihil. Illo, veritatis est ipsa cumque culpa praesentium dolor error.</p>

You can use <br> tag to write in a new line. If you want to put white spaces you have to move the text via CSS. For example:
HTML:
<font id="moving">Some text</font>
CSS: #moving { float: right; }
but if it not works you can try with:
#moving { position: absolute !important; float: right; }
The !important attribute makes sure that the position tag will be set on absolute.

Shrink overflowing content to fit container?

Is it possible in CSS (if not, javascript?) to shrink content that overflows its container, rather than hide it?
I have a box with some text etc, which shrinks in width as the viewport gets smaller, and the height is restricted too. All the content needs to remain visible, but within the bounds. Scroll is not an option.
body {
background-color: mediumaquamarine;
}
div {
width: 300px;
height: 150px;
overflow: hidden;
background-color: #fff;
}
<div>
<h1>example title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati fugiat dolore amet odit quaerat iusto sapiente ea quod atque necessitatibus id eius accusantium itaque voluptatibus laborum, doloremque, recusandae, nobis consequatur.</p>
<button>a button</button>
</div>

Hmm, the question is a little unclear, but you could look into using viewport width font-size. It will resize based on the screen size:
body {
background-color: mediumaquamarine;
}
div {
width: 300px;
height: 150px;
overflow: hidden;
background-color: #fff;
font-size: 1.3vw;
}
button {
font-size: 1.3vw;
}
<div>
<h1>example title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati fugiat dolore amet odit quaerat iusto sapiente ea quod atque necessitatibus id eius accusantium itaque voluptatibus laborum, doloremque, recusandae, nobis consequatur.</p>
<button>a button</button>
</div>

Use this function to adjust the font-size of a span inside a div:
function adjustHeights(elem) {
var fontstep = 2;
if ($(elem).height() > $(elem).parent().height() || $(elem).width() > $(elem).parent().width()) {
$(elem).css('font-size', (($(elem).css('font-size').substr(0, 2) - fontstep)) + 'px').css('line-height', (($(elem).css('font-size').substr(0, 2))) + 'px');
adjustHeights(elem);
}
}
div {
position: fixed;
width: 200px;
height: 100px;
border: 1px solid blue;
padding: 1px;
overflow-wrap: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span id="text">
sldfjslfjladf
sf
as
f
wer
qwreqwrewasdf
sd
f
s
fs
df
s
ffadsssssssssssssssssssssssssssss
asdf<br/>
sdf
s
dsfsfaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</span>
</div>
<script>
function adjustHeights(elem) {
var fontstep = 2;
if ($(elem).height() > $(elem).parent().height() || $(elem).width() > $(elem).parent().width()) {
$(elem).css('font-size', (($(elem).css('font-size').substr(0, 2) - fontstep)) + 'px').css('line-height', (($(elem).css('font-size').substr(0, 2))) + 'px');
adjustHeights(elem);
}
}
var div = document.getElementById("text");
adjustHeights(div);
</script>
JSFiddle: http://jsfiddle.net/e8B9j/1390/

SVG with text element.
Make an svg with expandable text.
It will eventually be hard to read.
<div style="width: 60px;">
<svg width="100%" height="100%" viewBox="0 -200 1000 300"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text font-size="300" fill="black">Text</text>
</svg>
</div>
Non styled example
https://jsfiddle.net/k8L4xLLa/32/
Cool styled example
https://jsfiddle.net/k8L4xLLa/14/
You can use media queries to change the font size when needed.
Honestly though, consider flexbox. Its a much cleaner solution that does not make the text scalable. Then you can wrap your elements when theyre too small. :)

How do I make the box below move ( accordion )

Didn't really know how to explain my problem in the title, my question is how do I make it so when I press the top box the other two boxes move down so you can see the text? The same goes for the other two boxes, if I press the middle the last box moves and when I press the last one the top and the middle stays. Plus the boxes has to go back to it's original place. Please I need help with this
$(".faq,.faq2,.faq3").click(function() {
$(this).find(".faq-box-more").toggleClass("open");
$(".faq,.faq2,.faq3").not(this).find(".faq-box-more").removeClass("open");
});
.faq,
.faq2,
.faq3 {
height: 100px;
width: 500px;
background: red;
position: relative;
top: 100px;
left: 50%;
transform: translate(-50%, 0%);
}
.faq-box {
position: relative;
height: 100%;
width: 100%;
background: #333;
cursor: pointer;
padding: 0 20px;
}
.faq-box h2 {
position: absolute;
top: 50%;
transform: translate(0, -50%);
color: #fff;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 1.9rem;
}
.faq-box i {
position: absolute;
left: 96%;
top: 50%;
font-size: 3rem;
transform: translate(-100%, -50%);
color: #fff;
}
.faq-box-more {
position: absolute;
height: 0%;
top: 100%;
background-color: #222;
color: #fff;
width: 100%;
}
.faq-box-more p {
position: absolute;
width: 100%;
padding: 20px;
}
.open {
height: 140% !important;
}
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="faq">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
<div class="faq2">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
<div class="faq3">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
</section>

see snippet below or jsfiddle
if you don't want to use the jqueryUI accordion and want to learn how it actually works, it's something like this
in CSS do not use absolute positioning on faq-box-more as it won't occupy any space. instead hide it with display:none
for JQ
first, you don't need to add different classes to all the faq divs, you can add one common class and then select the respective faq-box-more connected to the faq you click on , using jQuery methods below
when you click on faq-box ( either one of them ) , in a variable ( for cleaner and concise code ) you store the corresponding faq-box-more .
you do this by using sibling() method. searching .faq-box's ' brothers ' for the .faq-box-more . in HTML structure faq-box and faq-box-more are on the same level, therefore they are siblings
then using an if condition you check if the previous selected faq-box-more is visible or not. IF YES -> close it , IF NO -> open IT .
you close and open using slideUp() and slideDown() methods ( click on the methods to see more info about them )
then, you also want to find any previous opened faq-box-more and close them, so only one is opened at one time ( the one corresponding to the box you clicked on ) . to do this you use the parents() method to 'climb' up the HTML structure and get to faq and then using siblings() and find() you find the .faq-box-more , and if it is open, you hide it with slideUp()
i think it's important that you try to understand the process behind the accordion and not just copy-paste it .
if you have anymore questions on this subject, feel free to ask in the comments
P.S. you had many problems in your code ( CSS ), it tried to correct some of them but also i wanted not to change too much your code.
$(".faq-box").on("click",function() {
var boxMore = $(this).siblings(".faq-box-more")
if ($(boxMore).is(":visible")) {
$(boxMore).slideUp()
} else {
$(boxMore).slideDown(500)
}
$(this).parents(".faq").siblings().find(".faq-box-more").slideUp()
});
.faq {
width: 500px;
background: red;
position: relative;
left: 50%;
transform: translate(-50%, 0%);
}
.faq-box {
position: relative;
height: 100%;
width: 100%;
background: #333;
cursor: pointer;
padding: 0 20px;
}
.faq-box h2 {
color: #fff;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 1.9rem;
}
.faq-box i {
position: absolute;
left: 96%;
top: 50%;
font-size: 3rem;
transform: translate(-100%, -50%);
color: #fff;
}
.faq-box-more {
background-color: #222;
color: #fff;
width: 100%;
height:200px;
display:none;
}
.faq-box-more p {
position: absolute;
width: 100%;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="faq">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
<div class="faq">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
<div class="faq">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
</section>