I coded a simple javascript "clearning Shopping List" code.
I was able to remove the shopping list and add two messages:
One says that the shopping list has been cleared and one pops up a button that asks if it was a mistake and you want to undo your change.
Now my problem is that when you press the "Undo" button the class doesn't get added back.
// javascript
var shoppingList = document.querySelector(".shoppingCart");
var toggleButton = document.querySelector("button.showList");
var clearedBox = document.querySelector(".clearedBox");
var clearedUndo = document.querySelector("button.clearedUndo");
//Toggle Shopping Cart
toggleButton.addEventListener("click", () => {
shoppingList.remove(".shoppingCart");
clearedBox.style.display = "block";
toggleButton.remove("button.showList");
});
//Undo Removal
clearedUndo.addEventListener("click", () => {
clearedUndo.createClass(".shoppingCart");
});
html, body {
margin: 0;
padding: 0;
margin-left:30px;
}
.clearedBox {
display:none;
}
.clearedMessage {
background:#D66A68;
color: white;
padding:10px;
width:260px;
text-align:center;
border-radius:10px;
}
.clearedUndo {
background:#1C77C3;
color: white;
padding:5px;
width:225px;
border-radius:5px;
text-align:center;
font-size:12px;
}
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>index.html</h1>
<button class="showList">Show</button>
<div class="shoppingCart">
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Juice</li>
<li>Pasta</li>
<li>Water</li>
<li>Donuts</li>
</ul>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
</div>
<div class="clearedBox">
<p class="clearedMessage">Your Shopping cart is now cleared!</p>
<button class="clearedUndo">Accidental? Undo your change!</button>
</div>
<script src="index.js"></script>
</body>
</html>
I would assume this part is wrong:
//Undo Removal
clearedUndo.addEventListener("click", () => {
clearedUndo.createClass(".shoppingCart");
});
Once you remove it, it's gone, and if you want to put it back with JavaScript then all that markup really needs to be re-inserted, so I'd consider just hiding and showing the elements as needed, by changing the JS to this:
var shoppingList = document.querySelector(".shoppingCart");
var toggleButton = document.querySelector("button.showList");
var clearedBox = document.querySelector(".clearedBox");
var clearedUndo = document.querySelector("button.clearedUndo");
//Toggle Shopping Cart
toggleButton.addEventListener("click", () => {
shoppingList.style.display = "none";
clearedBox.style.display = "block";
toggleButton.style.display = "none";
});
//Undo Removal
clearedUndo.addEventListener("click", () => {
shoppingList.style.display = "block";
clearedBox.style.display = "none";
toggleButton.style.display = "block";
});
ISSUE
Don't use the elem.remove .Because if you undo the action no elements are present .For alternatively you can use elem.classList.toggle
// javascript
var shoppingList = document.querySelector(".shoppingCart");
var toggleButton = document.querySelector("button.showList");
var clearedBox = document.querySelector(".clearedBox");
var clearedUndo = document.querySelector("button.clearedUndo");
//Toggle Shopping Cart
toggleButton.addEventListener("click", () => {
shoppingList.classList.toggle('hide')
clearedBox.classList.toggle('show')
//toggleButton.remove("button.showList");
});
//Undo Removal
clearedUndo.addEventListener("click", () => {
shoppingList.classList.toggle('hide')
clearedBox.classList.toggle('show')
});
html,
body {
margin: 0;
padding: 0;
margin-left: 30px;
}
.clearedBox {
display: none;
}
.hide{
display: none;
}
.show{
display: block;
}
.clearedMessage {
background: #D66A68;
color: white;
padding: 10px;
width: 260px;
text-align: center;
border-radius: 10px;
}
.clearedUndo {
background: #1C77C3;
color: white;
padding: 5px;
width: 225px;
border-radius: 5px;
text-align: center;
font-size: 12px;
}
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>index.html</h1>
<button class="showList">Show</button>
<div class="shoppingCart">
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Juice</li>
<li>Pasta</li>
<li>Water</li>
<li>Donuts</li>
</ul>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
</div>
<div class="clearedBox">
<p class="clearedMessage">Your Shopping cart is now cleared!</p>
<button class="clearedUndo">Accidental? Undo your change!</button>
</div>
<script src="index.js"></script>
</body>
</html>
Related
I recently started making a little website project and I'm struggling a bit with customizing my scrollbar.
I got so far that the scrollbar is only visible when you hover over it but that's not exactly my goal. I want it to be hidden when the user didn't scroll for a certain period of time. This is what I got so far:
<style>
::-webkit-scrollbar {
width: 6px;
height: 12px;
}
::-webkit-scrollbar-track {
background: rgba(242, 242, 242, 0);
}
::-webkit-scrollbar-thumb {
background: rgba(221, 221, 221, 0);
border-radius: 3px;
}
/*Commented because I don't want it to show when I just hover the site
body:hover::-webkit-scrollbar-thumb {
background: rgb(0, 0, 0);
}
*/
body.scrolling::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:horizontal:hover,
::-webkit-scrollbar-thumb:vertical:hover {
background: rgb(0, 0, 0);
}
::-webkit-scrollbar-thumb:horizontal:active,
::-webkit-scrollbar-thumb:vertical:active {
background: rgb(0, 0, 0);
}
</style>
<script>$(window).scroll(function() {
$('body').addClass('scrolling');
alert("!!");
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
$('body').removeClass('scrolling');
}, 250));
});</script>
This is my first post on a forum like this so please just tell me if I have to provide more info and which info is missing.
I think its just a typo. Change the closing style tag to </style>. It can't be tested very well if theres an alert popping up every time you scroll. Remove alert("!!"); or change it to console.log("!!");
[LATER]
As you want the scrollbar to fade in and out with a transition, you'll have to use an element that covers it and animate its opacity. It's not possible to put an element above the document's scrollbar though. That's why you have to wrap the whole page inside a div and customize its scrollbar.
document.querySelector('.scroll-box').addEventListener('scroll', hideCoverBar);
document.querySelector('.scroll-box').addEventListener('mousemove', hideCoverBar);
var showTimeout;
function hideCoverBar() {
document.querySelector('.cover-bar').classList.add('hidden');
clearTimeout(showTimeout);
showTimeout = setTimeout(showCoverBar, 1000);
}
function showCoverBar() {
document.querySelector('.cover-bar').classList.remove('hidden');
}
body,
html {
margin: 0;
padding: 0;
font-family: monospace;
}
.main {
padding: 20px;
}
h1 {
font-size: 50px;
margin: 0;
}
p {
font-size: 12px;
margin: 0;
}
img {
display: block;
margin: 0 auto;
padding: 20px;
max-width: 100%;
box-sizing: border-box;
}
.scroll-bar-wrap {
width: 100vw;
position: relative;
}
.scroll-box {
width: 100%;
height: 100vh;
overflow-y: scroll;
}
.scroll-box::-webkit-scrollbar {
width: .4em;
}
.scroll-box::-webkit-scrollbar,
.scroll-box::-webkit-scrollbar-thumb {
overflow: visible;
border-radius: 4px;
}
.scroll-box::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, .2);
}
.cover-bar {
position: absolute;
background: #fff;
pointer-events: none;
height: 100%;
top: 0;
right: 0;
width: .4em;
-webkit-transition: all .5s;
opacity: 1;
}
.cover-bar.hidden {
opacity: 0;
}
<div class="scroll-bar-wrap">
<div class="scroll-box">
<div class="main">
<h1>Lorem ipsum dolor sit amet
</h1>
<img src="http://placekitten.com/600/400" />
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</div>
</div>
<div class="cover-bar"></div>
</div>
fiddle: https://jsfiddle.net/71fjr0Lz/
I want to do infinite scroll in plain Javascript. I saw several tutorials but all of them fetch some random data from some api. I understand the code from tutorials but I don't know how to get data in order, not random.
I want to do something similar like here: https://codepen.io/FlorinPop17/pen/RwwvKYJ but I want to use data from my local file. Let's assume it's data.js and has code like it:
data = [{}, {}]
so it's array of objects and let's assume the content of objects is like here: https://jsonplaceholder.typicode.com/posts/
How would you change the code from this codepen to display posts one by one in order? I guess, the function getPost should have parameter "id" and every time this function is called the parameter should be plus 1? But how to do it? Or maybe I should iterate through data.js and on every iteration check if user scrolled to bottom?
You simply have to change the getPost() function to use your inline blog_data which contains all the available posts. The current offset is saved in a global variable post_offset which is increased by every getPost() call so the order will stay the same and no post is shown multiple times.
// all the blog entries that are available
const blog_data = [{
title: "Blog Entry 1",
body: "This is the example body text for entry 1."
},{
title: "This is number two",
body: "Also blog entry number 2 has some content."
},{
title: "Blog entry three",
body: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
},{
title: "Blog entry four",
body: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
},{
title: "Blog entry five",
body: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
},{
title: "Blog entry six",
body: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
}];
const container = document.getElementById('container');
const loading = document.querySelector('.loading');
let post_offset = 0;
getPost();
getPost();
getPost();
window.addEventListener('scroll', () => {
const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
if(clientHeight + scrollTop >= scrollHeight - 5) {
// show the loading animation
showLoading();
}
});
function showLoading() {
if(post_offset < blog_data.length){
loading.classList.add('show');
// load more data
setTimeout(getPost, 1000)
}
else{
// end has been reached, no more posts available
}
}
async function getPost() {
if(post_offset < blog_data.length){
addDataToDOM(blog_data[post_offset]);
post_offset++;
}
}
function addDataToDOM(data) {
const postElement = document.createElement('div');
postElement.classList.add('blog-post');
postElement.innerHTML = `
<h2 class="title">${data.title}</h2>
<p class="text">${data.body}</p>
`;
container.appendChild(postElement);
loading.classList.remove('show');
}
#import url('https://fonts.googleapis.com/css?family=Open+Sans:300,600&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #fafafa;
font-family: 'Open Sans', sans-serif;
padding-bottom: 100px;
}
.container {
margin: 0 auto;
max-width: 600px;
}
.blog-post {
background-color: #fff;
box-shadow: 0px 1px 2px rgba(50, 50, 50, .1), 0px 2px 4px rgba(60, 60, 60, 0.1);
border-radius: 4px;
padding: 40px;
margin: 20px 0;
}
.title {
margin: 0;
}
.text {
color: #555;
margin: 20px 0;
}
.loading {
opacity: 0;
display: flex;
position: fixed;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
transition: opacity .3s ease-in;
}
.loading.show {
opacity: 1;
}
.ball {
background-color: #777;
border-radius: 50%;
margin: 5px;
height: 10px;
width: 10px;
animation: jump .5s ease-in infinite;
}
.ball:nth-of-type(2) {
animation-delay: 0.1s;
}
.ball:nth-of-type(3) {
animation-delay: 0.2s;
}
#keyframes jump {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
<div class="container" id="container">
<h1>Blog Posts</h1>
</div>
<div class="loading">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
I have a basic slider with Previous and Next buttons and Im trying to figure out how to scroll through the slides and add/remove a class to the relevant slides while cycling. Please can I get some help.
Heres what I have so far,I'd like the previous and next links to cycle through the slides adding and removing classes as it goes. Hope that makes sense.
Thanks.
Codepen : https://codepen.io/ukscotth/pen/LYERPvJ
HTML
<div class="slider-container">
<div class="slide show" data-index="1">
<div class="image-container">
<div class="image" style="background-image:url('https://images.pexels.com/photos/3233372/pexels-photo-3233372.jpeg');">
</div>
</div>
<div class="info-container">
<h1>Slide 1 Title</h1>
<h4>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</h4>
</div>
</div>
<div class="slide" data-index="2">
<div class="image-container">
<div class="image" style="background-image:url('https://images.pexels.com/photos/3268443/pexels-photo-3268443.jpeg');">
</div>
</div>
<div class="info-container">
<h1>Slide 2 Title</h1>
<h4>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</h4>
</div>
</div>
<div class="prev-button">PREV</div>
<div class="next-button">NEXT</div>
</div>
CSS
.slider-container {
width:100%;
padding:50px;
}
.slide {
position:absolute;
opacity:0;
}
.slide.show {
opacity:1;
}
.image-container{
display: inline-block;
margin-right:30px;
}
.image {
width:300px;
height:300px;
background-size:cover;
}
.info-container{
display: inline-block;
width:300px;
vertical-align: top;
}
.prev-button{
position:absolute;
top:400px;
left:150px;
}
.next-button{
position:absolute;
top:400px;
left:250px;
}
JS
(function($) {
"use strict";
var count;
$count = 1;
$('.next-button').click(function(e) {
$('.slide[data-index=2]').addClass('show');
});
})(jQuery);
Replace the next and prev function as below and it works. You just have to use a simple logic........
$('.next-button').click(function(e) {
if(active==4){
prev = 4; active = 1; next = 2;
$('.slide[data-index='+active+']').addClass('show');
$('.slide[data-index='+prev+']').removeClass('show');
} else {
$('.slide[data-index='+active+']').removeClass('show');
$('.slide[data-index='+next+']').addClass('show');
if (prev == 4) {
prev = 0;
}
prev++;
active++;
next++;
}
console.log('prev'+prev);
console.log('active'+active);
console.log('next'+next);
});
$('.prev-button').click(function(e) {
if(active==1){
prev = 3; active = 4; next = 1;
$('.slide[data-index='+active+']').addClass('show');
$('.slide[data-index='+next+']').removeClass('show');
} else {
$('.slide[data-index='+active+']').removeClass('show');
$('.slide[data-index='+prev+']').addClass('show');
prev--;
active--;
if (next == 1) {
next = 5;
}
next--;
}
console.log('prev'+prev);
console.log('active'+active);
console.log('next'+next);
});
I have done my own slider before. I can give you an idea.
when "next" is pressed, remove the "show" class from the current slide, increment the index and add the "show" class to the next. When the current index is the maximum, make the next index to "1".
If you want to automate the slider, have a time interval
setInterval( "slideSwitch()", 5000 ); //this will run slideSwitch every 5 seconds.
Inside this function, add the "show" class to next slide and remove the "show" class to previous(current) slide.
Hope this idea helps.....
Try to put the "if" statement first.....
$('.prev-button').click(function(e) {
if(active==1){
prev = 4; active = 1; next = 2;
// comment this out...$('.slide[data-index='+active+']').addClass('show');
}
$('.slide[data-index='+active+']').removeClass('show');
$('.slide[data-index='+prev+']').addClass('show');
prev--;
active--;
next--;
console.log('prev'+prev);
console.log('active'+active);
console.log('next'+next);
});
I have an element with a certain size, that contains texts of single or multiple lines in different lengths. Now I want to scale the font-size of these texts in such a way, that the longest line of the text fits perfectly into the containers width.
As an example, I want this markup
.container {
width: 400px;
border: 1px solid green;
padding: .5em;
}
.container>div {
border: 1px dotted gray;
}
<div class="container">
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum.</div>
<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br />sed diam nonumy eirmod tempor invidunt<br />ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
produce something like this:
I tried using relative font sizing unit, but always ended up adjusting the font-size of every child element manually, which isn't an option.
Also this post about dynamically scaling text to fit the viewport doesn't help, since I have multiple different text lengths.
Can this be solved with CSS? Or do I have to take a Javascript approach where I count the letters and adjust the font-size accordingly? But what if I use a font where letters have different sizes?
How about this?
$(document).ready(function() {
var divEls = $('.container div');
for(var i=0; i<divEls.length;i++){
var span = $(divEls[i]).find('span');
var fontSize = 16;
while (span.width() < $(divEls[i]).width()) {
span.css('font-size', fontSize++)
}
// wrap if span exceeds div width
if (span.width() > $(divEls[i]).width()) {
span.css('white-space', 'pre-wrap');
}
}
});
.container {
width: 400px;
border: 1px solid green;
padding: .5em;
}
.container>div {
border: 1px dotted gray;
white-space: pre;
}
<div class="container">
<div><span>Lorem ipsum dolor sit amet.</span></div>
<div><span>Lorem ipsum.</span></div>
<div><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br />sed diam nonumy eirmod tempor invidunt<br />ut labore et dolore magna aliquyam erat, sed diam voluptua .</span></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can also try an ES6 solution like this CodePen Demo
Update - per the comment below, here is a reponsive solution (also see this CodePen Demo):
function resizeFont() {
var divEls = $(".container div");
for (var i = 0; i < divEls.length; i++) {
var span = $(divEls[i]).find("span");
var fontSize = (span.css("font-size").match(/\d+/)[0]);
while (span.width() < $(divEls[i]).width()) {
span.css("font-size", fontSize++);
}
while (span.width() > $(divEls[i]).width()) {
span.css("font-size", fontSize--);
}
}
}
$(document).ready(function() {
resizeFont();
$(window).on("resize", resizeFont);
});
body {
margin: 0;
}
.container {
max-width: 100vw;
border: 1px solid green;
padding: .5em;
}
.container>div {
border: 1px dotted gray;
white-space: pre;
}
<div class="container">
<div><span>Lorem ipsum dolor sit amet.</span></div>
<div><span>Lorem ipsum.</span></div>
<div><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br />sed diam nonumy eirmod tempor invidunt<br />ut labore et dolore magna aliquyam erat, sed diam voluptua .</span></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I started learning javascript this week and I'm getting my head round the basics. I've started building what will be a "FAQ" section for a page that uses a toggle switch to open and close target divs.
However, by default the div's display is set to visible. I've put a function in that will set this to hidden, so that the dropdown's are collapsed on page load. I've tried stacking them (the toggle function, and display functions), separating them with a semi-colon within "onLoad" in the body tag.
Now, before I applied these functions to run "onLoad" both worked fine. However now only the 2nd function works that toggles the divs, but the function stating to have the divs collapsed onLoad is not.
Where am I going wrong here?
Also, seeing as I'm new to this, if there's a better way, or more shorthand version of this feel free to let me know :)
function toggleOnLoad() {
document.getElementById('dropdown01').style.display = 'none';
}
function toggleFunction() {
var dropDown = document.getElementById('dropdown01');
var dropDownCollapse = document.getElementById('toggle-image').src = "Images/banner_toggle_collapse.png";
var dropDownExpand = document.getElementById('toggle-image').src = "Images/banner_toggle_expand.png";
if (dropDown.style.display != 'none') {
dropDown.style.display = 'none';
document.getElementById('toggle-image').src = dropDownExpand;
} else {
dropDown.style.display = '';
document.getElementById('toggle-image').src = dropDownCollapse;
}
}
css: body {
background-color: #cccccc;
padding: 0;
margin: 0;
}
.container {
margin-left: 20%;
margin-right: 20%;
background-color: white;
padding: 1em 3em 1em 3em;
}
.toggle-header {
padding: 0.5em;
background-color: #0067b1;
overflow: auto;
}
#toggle {
border: none;
width: 300;
height: 3em;
background-color: #0067b1;
outline: 0;
}
.button-container {
float: right;
margin-right: 0.5em;
display: inline-block;
}
.dropdowns {
padding: 2em;
background-color: #eeeeee;
}
HTML & Javascript:
<body onLoad="toggleOnLoad(); toggleFunction()">
<div class="container">
<div class="toggle-header">
<div class="button-container" title="">
<button id="toggle" onClick="toggleFunction()">
<img id="toggle-image" src="" alt="toggle" style="max-height: 100%; max-width: 100%">
</button>
</div>
</div>
<div id="dropdown01" class="dropdowns">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span>
</div>
</div>
</body>
Do create an init function manually.
window.addEventListener("load", myInit, true); function myInit(){ // call your functions here.... };
By doing this you can call that set of functions anytime.
The better way to do it i believe is to call your functions inside window.load instead of the body as follows:
window.onload=function(){
toggleOnLoad();
toggleFunction();
}
Your idea is correct. Probably we can simplify the implementation.
First, let's define a new class hidden to remove elements.
.hidden {
display: none;
}
Now we just can toggle this class to show and hide the content.
function toggleFunction() {
...
content.classList.toggle('hidden')
...
}
Also remove toggleOnLoad function from the body and add hidden to the content div
<body onLoad="toggleFunction()">
...
<div id="dropdown01" class="dropdowns hidden">
...
</body>
Finally, the toggleFunction must add the right class based on the hidden class of the content.
function toggleFunction() {
dropDown.classList.remove(expand, collapse)
...
const state = content.classList.contains('hidden') ? collapse : expand
dropDown.classList.add(state)
}
This is functional snipped:
const content = document.getElementById('dropdown01')
const dropDown = document.querySelector('#toggle-image')
const collapse = 'fa-plus-square'
const expand = 'fa-minus-square'
function toggleFunction() {
dropDown.classList.remove(expand, collapse)
content.classList.toggle('hidden')
const state = content.classList.contains('hidden') ? collapse : expand
dropDown.classList.add(state)
}
body {
background-color: #cccccc;
padding: 0;
margin: 0;
}
.container {
margin-left: 20%;
margin-right: 20%;
background-color: white;
padding: 1em 2em 1em 2em;
}
.toggle-header {
padding: 0.5em;
background-color: #0067b1;
overflow: auto;
}
#toggle {
border: none;
width: 300px;
height: 2em;
background-color: #0067b1;
outline: 0;
}
.button-container {
float: right;
margin-right: 0.5em;
display: inline-block;
}
.dropdowns {
padding: 1em;
background-color: #eeeeee;
}
.hidden {
display: none;
}
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<body onLoad="toggleFunction()">
<div class="container">
<div class="toggle-header">
<div class="button-container" title="">
<i id="toggle-image" class="fas fa-plus-square" onClick="toggleFunction()"></i>
</div>
</div>
<div id="dropdown01" class="dropdowns hidden">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
</div>
</body>