We Keep Coding

How to make div expandable-collapseable to the left on click on button using JAVASCRIPT not by jQuery?

I have a panel which contains some options as shown in the image :
There is a arrow button on header , what I am looking for is , if I click on that button it should expand to the left as shown :
Example : If I have lets suppose 20 options it will open to the left like that showing 5 image in each part and if I again click on it it will collapse like 1st image .
How it could be done using javascript , html and css only provided everything is dynamic in nature. Any help would be appreciated .
Thanks

you can use the flex-flow: column wrap and overflow: hidden to make something like this.
POC:
const expend = document.querySelector(".expend");
const tools = document.querySelector(".tools");
let isExpened = false;
function expendOrRetract() {
if (isExpened) {
expend.innerHTML = ">";
tools.classList.remove("extend");
} else {
expend.innerHTML = "<";
tools.classList.add("extend");
}
isExpened = !isExpened;
}
* {
box-sizing: border-box;
}
.tools {
position: relative;
width: 20px;
display: flex;
flex-flow: column wrap;
height: 80px;
overflow: hidden;
}
.tools.extend {
width: 40px;
}
.expend {
cursor: pointer;
height: 20px;
width: 20px;
border: solid 1px;
}
.tool {
height: 20px;
width: 20px;
border: solid 1px;
}
<div class="expend" onclick="expendOrRetract()">></div>
<div class="tools">
<div class="tool">t1</div>
<div class="tool">t2</div>
<div class="tool">t3</div>
<div class="tool">t4</div>
<div class="tool">t5</div>
<div class="tool">t6</div>
<div class="tool">t7</div>
<div class="tool">t8</div>
</div>
you can use diraction: rtl
to the left:
const expend = document.querySelector(".expend");
const tools = document.querySelector(".tools");
let isExpened = false;
function expendOrRetract() {
if (isExpened) {
expend.innerHTML = "<";
tools.classList.remove("extend");
} else {
expend.innerHTML = ">";
tools.classList.add("extend");
}
isExpened = !isExpened;
}
* {
box-sizing: border-box;
}
.tools {
direction: rtl;
position: absolute;
right: 10px;
top: 30px;
width: 20px;
display: flex;
flex-flow: column wrap;
height: 80px;
overflow: hidden;
}
.tools.extend {
width: 40px;
}
.expend {
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
height: 20px;
width: 20px;
border: solid 1px;
}
.tool {
height: 20px;
width: 20px;
border: solid 1px;
}
<div class="expend" onclick="expendOrRetract()">
< </div>
<div class="tools">
<div class="tool">t1</div>
<div class="tool">t2</div>
<div class="tool">t3</div>
<div class="tool">t4</div>
<div class="tool">t5</div>
<div class="tool">t6</div>
<div class="tool">t7</div>
<div class="tool">t8</div>
</div>

FadeIn random Javascript Game

I am trying to solve this problem with my mini game using javascript. The Game is suppose to randomly show divs using the randomFadeIn with jquery.random-fade-in.min.js. It works but the problem is that I could not stop it from running. This is just a basic javascript game but it is hard to implement using jquery
Here is my full code
const result = document.getElementById(".box-container>div");
console.log(result);
const button = document.getElementsByTagName("div");
let sec = 0;
function gameStart(num) {
let num1 = 800;
if ($(".box-container>div>p").css('opacity') != 0) {
console.log("not yet done");
$(function() {
$('.box-container').randomFadeIn(800);
});
} else {
console.log("win");
};
}
function clickBox() {
$(".box-container>div>p").click(function() {
$(this).animate({
opacity: 0
}, 800);
})
}
function gameWins() {}
function gameStops() {
setTimeout(function() {
alert("Game Ends");
}, 60000);
}
clickBox();
//gameStops();
gameWins();
.box-container {
width: 232px;
float: left;
width: 45%;
}
.box-container div {
float: left;
height: 100px;
margin-bottom: 8px;
margin-right: 8px;
overflow: hidden;
width: 100px;
}
.box-container div p {
background: #097;
box-sizing: border-box;
color: #fff;
display: none;
font-size: 20px;
height: 100%;
margin: 0;
padding-top: 14px;
text-align: center;
width: 100%;
}
.clearfix:after {
clear: both;
content: '';
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://sutara79.github.io/jquery.random-fade-in/dist/jquery.random-fade-in.js"></script>
<h1> Click Dem Boxes</h1>
<button onclick="gameStart()"> Start game </button>
<p>Mechanics: You need to click all the boxes before the time ends</p>
> just a bunch of divs that fades in and does not stop
<div class="box-container clearfix">
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>

By using the .stop() function, you could stop the animation. See snippet below.
let maxSeconds = 30000;
let numOfCards = $('.box').length;
function gameStart() {
console.log("Game started");
let numOfClicked = 0;
$(".box-container>div>p").click(function() {
// Increase the counter
numOfClicked++;
// Fade out
$(this).fadeOut(800);
if(numOfClicked == numOfCards){
gameWon();
}
})
$('.box-container').randomFadeIn(800);
setTimeout(
function() {
if(numOfClicked != numOfCards){
gameLost();
}
}, maxSeconds);
}
function gameWon(){
gameStop();
console.log("You won the game!");
}
function gameLost(){
gameStop();
console.log("You lost the game!");
}
function gameStop(){
$(".box-container>div>p").stop(false, false);
}
.box-container {
width: 232px;
float: left;
width: 45%;
}
.box-container div {
float: left;
height: 100px;
margin-bottom: 8px;
margin-right: 8px;
overflow: hidden;
width: 100px;
}
.box-container div p {
background: #097;
box-sizing: border-box;
color: #fff;
display: none;
font-size: 20px;
height: 100%;
margin: 0;
padding-top: 14px;
text-align: center;
width: 100%;
}
.clearfix:after {
clear: both;
content: '';
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://sutara79.github.io/jquery.random-fade-in/dist/jquery.random-fade-in.js"></script>
<h1> Click Dem Boxes</h1>
<button onclick="gameStart()"> Start game </button>
<p>Mechanics: You need to click all the boxes before the time ends</p>
> just a bunch of divs that fades in and does not stop
<div class="box-container clearfix">
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
</div>

fadeIn doesn't work jquery

css
.wrap_result {
background-color: #f0f2f0;
border: 2px solid orangered;
padding: 20px;
position: fixed;
left: 35%;
top: 45%;
width: 400px;
height: 150px;
text-align: center;
display: none;
z-index: 5005;
}
script
$('#removeSelected').click(function (e) {
$('#qty').removeAttr('required');
$('#product_id').removeAttr('required');
var checked = $("input[type=checkbox]:checked").length;
var cboxCount = $('input:checkbox').length;
if (!checked) {
$('.wrap_result')
.text('No selected items')
.fadeIn(3000).fadeOut(3000);
e.preventDefault();
}
]);
When Im trying to remove products with 0 products selected im preventing form submit and informing user about it. Alert works just fine, but this custom window doesn't work :c

I think the problem was the typo, Check this out!
$(function(){
console.log('test')
$('#removeSelected').click(function (e) {
$('#qty').removeAttr('required');
$('#product_id').removeAttr('required');
var checked = $("input[type=checkbox]:checked").length;
var cboxCount = $('input:checkbox').length;
if (!checked) {
$('.wrap_result')
.text('No selected items')
.fadeIn(3000).fadeOut(3000);
e.preventDefault();
}
});
})
.wrap_result {
background-color: #f0f2f0;
border: 2px solid orangered;
padding: 20px;
position: fixed;
left: 35%;
top: 45%;
width: 400px;
height: 150px;
text-align: center;
display: none;
z-index: 5005;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap_result">
</div>
<div>
<form method="GET" action="#">
Water: <input type="checkbox" /><br/>
Fire: <input type="checkbox" /><br/>
Qty:<input type="text" id="qty"/><br/>
Product ID:<input type="text" id="product_id" required/><br/>
<button id="removeSelected">Remove</button>
</form>
</div>

Closable div - Left div slides close, while right div width expands

I'm trying to make a div on the left side that can close by sliding to the left While the content in the right div expands to 100% filling the space of the closed div. image example
I found a demo here but its only for the closable div.
<div id="intro-wrap">
<div class="open-intro">+</div>
<div class="close-intro">-</div>
<div id="contentWrap">
<h1 class="main-header">Here is a Title</h1>
<p class="main-desc">You can write whatever you want about yourself here. You can say you're a superhuman alien ant, arrived from the nether regions of Dwarf-Ant-Dom.</p>
</div>
</div>

It has some work to do, but it'll get you started.
$(function() {
"use strict";
var isOpen = true;
$('#open-close').on('click', function() {
if (isOpen) {
animate(false);
isOpen = false;
} else {
animate(true);
isOpen = true;
}
});
});
function animate(action) {
if (action) {
$('#left').animate({ width: "30vw" }, 600);
$('#right').animate({width: "70vw",marginLeft: "-5px"}, 600);
} else {
$('#left').animate({width: "0px"}, 600);
$('#right').animate({width: "99vw" }, 600);
}
}
* {
padding: 0;
margin: 0;
}
#wrapper{
width: 100vw;
height: 100px;
border: 2px solid purple;
}
#wrapper > *{
display: inline-block;
}
#left {
position: relative;
width: 30vw;
height: 100px;
background: green;
}
#right {
position: relative;
width: 65vw;
height: 100px;
background: navy;
}
#open-close {
position: absolute;
width: 10px;
height: 10px;
margin-top: 5px;
margin-left: 5px;
background: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="left"></div>
<div id="right">
<div id="open-close"></div>
</div>
</div>

how to make an object minimise again when clicked

I have a small form that is expanded when a user visits my webpage and then minimises after a few seconds. Then when the button is clicked it expands again. I have been trying to add code to allow it to minimise when the button is clicked again but i keep breaking it. Im a beginner with jquery, can anyone help?
fiddle: http://jsfiddle.net/ambersabre/vkfos3yn/
html:
<div id="fixed-form">
<div style="width: 100%; height: 43px">
<div id="btnclick" class="contactbtn" />
<div style="padding-top: 12px; font-size: 14px; padding-left: 26px; color: #fff; font-weight: bold; text-transform: uppercase">send us an email</div>
</div>
</div>
<div class="content" id="testdiv">
<div style="margin: 0 auto; width: 340px; height: 130px; padding-top: 5px">
<div style="padding-top: 10px">
<div style="float: left; width: 165px; height: 37px">
<input type="text" class="float-input" name="contactName" id="contactName" value="" class="txt requiredField" placeholder="EMAIL ADDRESS:" />
</div>
<button name="float-submit" type="submit" class="float-submit" style="margin-top: 8px; margin-left: 10px" value="float-submit" />Submit</button>
</div>
</div>
CSS:
#fixed-form {
position: fixed; z-index: 1;
right: 5px;
bottom: 0;
width: 400px;
}
.content {
background-color: grey;
padding: 10px;
width: 400px; height: 180px;
font-family:Lato; color: #fff; font-weight: bold; border: 2px solid grey;
font-size:14.5px; position: relative; z-index: 1; border-radius: 10px 0 0 0;
}
.contactbtn {
width: 192px; position: relative; z-index: 1; float: right;
height: 43px; background: grey;
}
.float-input {
width: 100%; height: 100%; border: none; background: #46A2A2;background: rgba(255, 255, 255, 0.5) none repeat scroll 0 0;
}
script:
$(document).ready(function () {
$(function () {
setTimeout(function () {
$("#testdiv").slideToggle(1500);
}, 5000)
$('#btnclick').click(function () {
$('#testdiv').show();
setTimeout(function () {
$("").slideToggle(1500);
}, 5000)
})
})
})

As you are using .slideToggle() use it again instead of .show()
setTimeout(function () {
$("#testdiv").slideToggle(1500);
}, 5000)
$('#btnclick').click(function () {
$('#testdiv').slideToggle();
});
DEMO

Try this:
http://jsfiddle.net/65bhj6th/5/
$( document ).ready(function() {
$(function() {
setTimeout(function() { $("#testdiv").slideToggle(1500); }, 5000)
$('#btnclick').click(function() {
$('#testdiv').slideToggle(1500);
setTimeout(function() { $("").slideToggle(1500); }, 5000)
})
})
})

How about this?
My example includes sliding up and down, I'm not sure if this acceptable, but it does work.
$( document ).ready(function() {
$(function() {
setTimeout(function() { $("#testdiv").slideToggle(1500); }, 5000)
$('#btnclick').click(function() {
$("#testdiv").slideToggle(1500);
})
})
})

$( document ).ready(function() {
$(function() {
setTimeout(function() {
$("#testdiv").slideToggle(1500); }, 5000)
$('#btnclick').click(function() {
$('#testdiv').slideToggle(1500);
})
})
})

Just add this jquery code DEMO
$('#btnclick').click(function() {
$('#testdiv').slideToggle( "slow" );
});