Develop Reference

how do i do it accordion grid

In the images below, the small box is like a tab, when clicked it will show the content at the bottom of it.
When the window / viewed in a smaller screen it will reduce the columns accordingly, however it should preserve its functionality.
Tablet
Mobile
const about = document.querySelector(".wrapper");
const btns = document.querySelectorAll(".accordion");
const articles = document.querySelectorAll(".content");
about.addEventListener("click", function(e) {
const id = e.target.dataset.id;
if (id) {
// remove selected from other buttons
btns.forEach(function(btn) {
btn.classList.remove("active");
});
e.target.classList.add("active");
// hide other articles
articles.forEach(function(article) {
article.classList.remove("active");
});
const element = document.getElementById(id);
element.classList.add("active");
}
});
* {
margin: 0 auto;
padding: 0;
max-width: 1000px;
box-sizing: border-box;
background-color: gray;
}
.accordion {
margin-top: 5px;
background-color: #eee;
color: #444;
padding: 15px;
width: 50%;
transition: 0.4s;
}
.accordion.active {
background-color: #ccc;
}
.post-container {
content: "";
display: table;
clear: both;
}
.container {
display: flex;
flex-direction: row;
gap: 6px;
}
.wrapper {
display: flex;
flex-direction: column;
}
.content {
display: none;
}
.wrapper2 {
width: 100%;
}
.content.active {
display: block;
padding: 20px;
}
.active,
.accordion:hover {
background-color: #ccc;
}
<main class="wrapper">
<section class="wrapper2">
<div class="container">
<button data-id="1" class="accordion">Section 1</button>
<button data-id="2" class="accordion">Section 2</button>
<button data-id="3" class="accordion">Section 3</button>
</div>
<div id="1" class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure ipsa optio eaque placeat aut deleniti facere nisi repudiandae sequi distinctio? Error dignissimos excepturi perferendis pariatur ad a ratione dolore atque.</div>
<div id="2" class="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda nesciunt autem dignissimos commodi ut velit iure sequi eveniet repudiandae. Nisi impedit ad, libero voluptates autem minima corporis mollitia illo eum.</div>
<div id="3" class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, numquam culpa. Impedit voluptates ad ea distinctio a doloremque ex officiis ducimus, nobis nihil qui repudiandae, dolore, pariatur ratione error nemo.</div>
</section>
<section class="wrapper2">
<div class="container">
<button data-id="4" class="accordion">Section 4</button>
<button data-id="5" class="accordion">Section 5</button>
<button data-id="6" class="accordion">Section 6</button>
</div>
<div id="4" class="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor ducimus cupiditate fuga ratione tempore eveniet possimus maiores quod sequi natus? Iusto dolor hic facilis culpa ad illo vel deserunt minima?</div>
<div id="5" class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur nihil obcaecati a cumque quos adipisci aliquam illum perspiciatis fugit, tempora aperiam officiis dignissimos odit incidunt modi tempore corporis. Porro, a.</div>
<div id="6" class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, quis est. Animi fuga ipsum porro ullam blanditiis illum inventore magnam, earum nesciunt ab quis placeat iste quo! Repudiandae, ratione sapiente!</div>
</section>
</main>

Animated CSS not strolling with page

I am new on css, html and javascript. Trying to create a website but stuck on animation.
#import url('https://fonts.googleapis.com/css?family=Montserrat:700');
body{
background-color: rosybrown;
}
header{
background-color: black;
height: 20%;
color: #fff;
text-align: center;
}
#fly-in {
height: 50px;
font-size: 4em;
margin: 40vh auto;
height: 20vh;
text-transform: uppercase;
}
#fly-in span {
display: block;
font-size: .4em;
opacity: .8;
}
#fly-in div {
position: fixed;
background-position: 50%;
margin: 2vh 0;
opacity: 0;
left: 10vw;
width: 80vw;
animation: switch 32s linear infinite;
}
#fly-in div:nth-child(2) { animation-delay: 4s}
#fly-in div:nth-child(3) { animation-delay: 8s}
#fly-in div:nth-child(4) { animation-delay: 12s}
#fly-in div:nth-child(5) { animation-delay: 16s}
#fly-in div:nth-child(6) { animation-delay: 20s}
#fly-in div:nth-child(7) { animation-delay: 24s}
#fly-in div:nth-child(8) { animation-delay: 28s}
#keyframes switch {
0% { opacity: 0;filter: blur(20px); transform:scale(12)}
3% { opacity: 1;filter: blur(0); transform:scale(1)}
10% { opacity: 1;filter: blur(0); transform:scale(.9)}
13% { opacity: 0;filter: blur(10px); transform:scale(.1)}
80% { opacity: 0}
100% { opacity: 0}
}
<header>
<div id="fly-in">
<div><span>Very</span>Cinematic</div>
<div>Fade Away<span>into the distance</span></div>
<div>Still Loops <span> for eternity</span></div>
<div><span>Just CSS</span> and HTML</div>
<div><span>Very</span>Cinematic</div>
<div>Fade Away<span>into the distance</span></div>
<div>Still Loops <span> for eternity</span></div>
<div><span>Just CSS</span> and HTML</div>
</div>
</header>
<div>
<H1>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Ab sit debitis error deleniti,
molestias consectetur nostrum cupiditate possimus
neque nemo adipisci aut a minima iste ipsam deserunt
incidunt iure aliquid?</H1>
<H1>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Ab sit debitis error deleniti,
molestias consectetur nostrum cupiditate possimus
neque nemo adipisci aut a minima iste ipsam deserunt
incidunt iure aliquid?</H1>
<H1>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Ab sit debitis error deleniti,
molestias consectetur nostrum cupiditate possimus
neque nemo adipisci aut a minima iste ipsam deserunt
incidunt iure aliquid?</H1>
<H1>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Ab sit debitis error deleniti,
molestias consectetur nostrum cupiditate possimus
neque nemo adipisci aut a minima iste ipsam deserunt
incidunt iure aliquid?</H1>
<H1>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Ab sit debitis error deleniti,
molestias consectetur nostrum cupiditate possimus
neque nemo adipisci aut a minima iste ipsam deserunt
incidunt iure aliquid?</H1>
<H1>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Ab sit debitis error deleniti,
molestias consectetur nostrum cupiditate possimus
neque nemo adipisci aut a minima iste ipsam deserunt
incidunt iure aliquid?</H1>
</div>
animation works well but what i want is when i stroll down animation should follow the page and go up. but thats not happen. I have changed position to relative, sticky and fixed but no luck.
codepin: https://codepen.io/younusrahman/pen/QWvpKXE

Changing the values of position won't fix the issue. I tried giving position: relative, now the text is getting moved up on scroll, but each texts are coming after another. If you have only one text, this would work.

Set div position to absolute inside "fly-in" div instead of fixed
#fly-in div
{
position: absolute;
}

Side Menu alpha not working over body tag

I have a side navigation menu on my site. When pressed, it calls a JavaScript function that changes the alpha channel of the body tag. For some reason only part of the screen's alpha channel is changing (section, img, bootstrap containers are not). The section tag has a class that gives it a background color, I'm thinking this might be the issue. Which would be the smart way to get this working?
This is the code I'm using for the alpha management:
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "350px";
document.body.style.background = "rgba(0,0,0,0.4)";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.body.style.background = "rgba(0,0,0,0)";
}
The html goes like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cripto Frog</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Rammetto+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="sidebar.js"></script>
</head>
<main>
<header>
<span class="menu_burger" onclick="openNav()"><i class="fas fa-align-justify"></i></i></span>
<img src="img/frog.jpg" alt="">
</header>
<body>
<!-- Side Menu -->
<div id="mySidenav" class="sidenav">
×
TOP_TEN_COINS
ALT_COINS
WHITE_PAPERS
YOUTUBERS
EXCHANGES
NEWS_SITES
CONTACTO
<section class="nav_divididor"></section>
<section class="nav_footer">hlkjhlkjhlk</section>
</div>
<section class="primera_section"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam doloremque excepturi molestias aut fuga ullam aliquid minus dolores voluptatem non, beatae placeat soluta libero eos et delectus nemo minima iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi error aspernatur officiis, sint fugiat unde quos labore laborum cupiditate voluptates, totam sunt ut quod praesentium omnis et consequuntur sapiente incidunt?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit iure eveniet a voluptas cumque! Eos qui, iusto neque, fugit praesentium totam soluta eius laudantium cupiditate dolorem dignissimos ut minus veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla earum soluta nesciunt dicta officia reprehenderit autem, molestias explicabo et accusamus, officiis nostrum cumque perspiciatis suscipit veniam molestiae fuga tenetur modi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate itaque atque molestiae, id fugit, quidem hic rem cum praesentium dolor perspiciatis nostrum sapiente enim corrupti doloremque aliquam voluptas cumque omnis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto dolor nostrum voluptate quos consectetur facere, quia, earum non, tenetur, officia laboriosam cumque suscipit itaque nobis obcaecati. Facilis veritatis, repudiandae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam doloremque excepturi molestias aut fuga ullam aliquid minus dolores voluptatem non, beatae placeat soluta libero eos et delectus nemo minima iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi error aspernatur officiis, sint fugiat unde quos labore laborum cupiditate voluptates, totam sunt ut quod praesentium omnis et consequuntur sapiente incidunt?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit iure eveniet a voluptas cumque! Eos qui, iusto neque, fugit praesentium totam soluta eius laudantium cupiditate dolorem dignissimos ut minus veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla earum soluta nesciunt dicta officia reprehenderit autem, molestias explicabo et accusamus, officiis nostrum cumque perspiciatis suscipit veniam molestiae fuga tenetur modi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate itaque atque molestiae, id fugit, quidem hic rem cum praesentium dolor perspiciatis nostrum sapiente enim corrupti doloremque aliquam voluptas cumque omnis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto dolor nostrum voluptate quos consectetur facere, quia, earum non, tenetur, officia laboriosam cumque suscipit itaque nobis obcaecati. Facilis veritatis, repudiandae.p</p>
</section>
<!-- Use any element to open the sidenav -->
</body>
<span onclick="openNav()">open</span>
</main>
<!-- Use any element to open the sidenav -->
<span onclick="openNav()">open</span>
</html>
css file
/* Secciones */
html{
margin-top: 0px;
/*overflow: hidden; */
}
body{
/* overflow-x: hidden;*/
}
p{
font-family: 'Lora';
font-style: normal;
font-weight: 700;
}
fieldset {
font-family: 'Lora';
font-style: normal;
font-weight: 100;
}
.nav_footer{
height: 90%;
background-color: black; /* Black*/
color: white;
display: flex;
align-items: flex-end;
/*overflow-x: hidden; */
}
.nav_divididor{
width: 100%;
background-color: #388E3C;
height: 12px;
}
.primera_section{
width: 100%;
height: 700px;
background-color: #FFFFFF; /* Black*/
}
.segunda_section{
width: 100%;
height: 700px;
background-color: #C8E6C9; /* Black*/
}
.tercera_section{
width: 100%;
height: 700px;
background-color: #BDBDBD; /* Black*/
}
.divisoria {
width: 100%;
background-color: black;
height: 2px;
}
.menu_burger{
position: absolute;
top:2;
}
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: white; /* Dark Green*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.8s; /* 0.5 second transition effect to slide in the sidenav */
}
.sidenav::-webkit-scrollbar {
display: none;
}
/* The navigation menu links */
.sidenav a {
font-family: 'Lora';
font-style: normal;
font-weight: 700;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: grey;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

element positioning

I am struggling with the positioning of content returned from an AJAX call.
Here's an example of how my HTML is laid out:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<section id="content">
<div id="container">
<div id="about">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia odit culpa excepturi itaque hic laborum odio nam deserunt ipsum dolor rerum repudiandae, quidem voluptatem nisi numquam tempora vel consequuntur harum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam ut error consectetur eum delectus porro dolore repellendus quidem! Ad, dignissimos minus debitis nam sunt aliquid eius quam cum, omnis magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe vero ducimus reprehenderit quibusdam esse sed, porro pariatur illum natus tempore? Iste laborum odio deleniti molestias praesentium delectus repudiandae consequatur corporis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est fugit provident, labore expedita nostrum laborum nesciunt! Assumenda inventore repudiandae dignissimos animi autem, dolorem sint, incidunt officia quam porro, perspiciatis fuga.
</div>
</div> <!-- end of content -->
</section> <!-- end of container -->
</body>
contact.html, bio.html etc... are all like about.html
And, here's the relevant css:
#container {
height: 100vh;
width: 100vw;
background-color: white;
text-align: center;}
#contact {
top: 30%;
background-color: yellow;
padding: 50px 50px;}
#about {
transform: translateY(60%);
background-color: red;
padding: 50px 50px;}
#bio {
transform: translateY(60%);
background-color: blue;
padding: 50px 50px;}
#gallery {
transform: translateY(60%);
background-color: green;
padding: 50px 50px;}
The problem I have is when I try to position the content of the divs with id of "about", "contact", "container" etc... the divs won't get positioned. When I set the top property in contact to 30%, the div just won't move and is stuck to the top of the page.
I have managed to position the other divs using transform but that seems a hack. What is the proper way of doing this? Thank you for your time.

This has nothing to do with AJAX.
If you wish to position element(s) with top, bottom, left, or right, the element(s) must also have their position property set (values can be absolute, relative and fixed) so that they are taken out of the normal document flow.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/position for details.
Here's a simple example:
div {
position:absolute;
width:100px;
height:100px;
}
.one {
top:50px;
left:100px;
background-color:red;
}
.two {
top:150px;
left:50px;
background-color:green;
}
.three {
top:50px;
left:200px;
background-color:yellow;
}
.four {
top:150px;
left:150px;
background-color:blue;
}
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>

How do I create a simple slider with fade effect?

I want to create a simple basic jquery slider with just fade effect. Here is my html & css. I would be much appreciate if you can solve the javascript code for me :) Thanks in advance !
.wrapper {width: 1200px;margin: 70px auto;}
.text_slider {overflow: hidden;display: block;width: 700px;height: 100px;border: 2px solid #42474D;position: absolute;}
.basic_content_slider {position: absolute;overflow: hidden;}
.basic_content_slider p {padding: 20px 70px;display: inline-block;color: #252a30;}
#btn1 {display: block}
#btn2 {display: none;}
#btn3 {display: none;}
#btn4 {display: none;}
#btn5 {display: none;}
.next, .prev {width: 40px;height: 40px;position: absolute;top: 30px;opacity: 0.2;}
.next {background: url(images/next.png) no-repeat;right: 0;}
.prev {background: url(images/prev.png) no-repeat;left: 0;}
<div class="wrapper">
<div class="text_slider">
<div class="basic_content_slider">
<p class="panel_switch" id="btn1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, aspernatur, impedit, facilis voluptate quam ab esse nam cumque non vel rem nesciunt fugiat corporis repellat similique! Obcaecati, adipisci quos dolore.</p>
<p class="panel_switch" id="btn2">Impedit, facilis voluptate quam ab esse nam cumque non vel rem nesciunt fugiat corporis repellat similique! Obcaecati, adipisci quos dolore.</p>
<p class="panel_switch" id="btn3">Psum dolor sit amet, consectetur adipisicing elit. Eum, placeat, impedit, blanditiis, reprehenderit laboriosam officia a dolore illo quaerat quam alias perspiciatis dignissimos dolores minima ullam libero nemo odio inventore!</p>
<p class="panel_switch" id="btn4">quaerat quam alias perspiciatis dignissimos dolores minima ullam libero nemo odio inventore!</p>
<p class="panel_switch" id="btn5">Henderit laboriosam officia a dolore illo quaerat quam alias perspiciatis dignissimos dolores minima ullam libero nemo odio inventore!</p>
</div>
<div class="next"></div>
<div class="prev"></div>
</div>
</div>

Add to your css:
.panel_switch { opacity: 0; transition: opacity 0.5s; }
.panel_switch_active { opacity: 1; }
Add the panel_switch_active class to the first slide
Add following javascript (and include jQuery):
$(function(){
$(".prev").click(function(){
$(".panel_switch_active").removeClass("panel_switch_active").prev().addClass("panel_switch_active");
});
$(".next").click(function(){
$(".panel_switch_active").removeClass("panel_switch_active").next().addClass("panel_switch_active");
});
});
This is pretty basic though. You might want to read up on javascript and jQuery or look for a suitable plugin.
Edit: I've created a jsfiddle with a fully working version: https://jsfiddle.net/1pp92v1u/