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>

How do I fix red and green blocks with CSS ？

everyone
Would like to ask at present I am making a version when the web page to slide up the red and green block to be fixed, only the yellow block can slide!
The current treatment on the green side is using
position:sticky;
right:0px;
top:100px;
The grammar keeps him fixed there, but there's a problem because if you don't give height it looks like it's position:sticky; I want his height to be customizable, so I give him a height of 200px; As a result, when the content is too much or in RWD mode, it goes out of the green zone.
Is there a better way to fix the red and green blocks?
Here's what I'm trying to do so far.
https://codepen.io/hong-wei/pen/wvgbbye?editors=1100

Add align-items: flex-start; to your .container class and remove any height value from the aside.
.wrap{
background-color: #ccc;
line-height: 1.5;
}
.header{
position: fixed;
width: 100%;
background-color: #f75454;
box-shadow:0px 1px 30px #212529;
z-index: 1;
}
.header .list{
display: flex;
padding:20px;
justify-content:space-between;
}
.container{
display: flex;
padding:30px;
padding-top: 100px;
background-color: #5c5c5c;
align-items: flex-start;
}
.main{
flex:2;
padding:20px;
height: 1600px;
margin:0px 20px;
background-color: #f9cf5a;
}
.aside{
position:sticky;
right:0px;
top:100px;
padding:20px;
flex:1;
width: 100%;
background-color: #1ba784;
color:#eef7f2;
}
<div class="wrap">
<div class="header">
<ul class="list">
<li>測試</li>
<li>測試</li>
</ul>
</div>
<div class="container">
<div class="main">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum expedita pariatur facere repellat nobis sed modi, porro, at numquam accusantium aut consequuntur delectus ducimus atque officia dolores! Dolore quas delectus fuga accusantium quia atque esse, non, aut quae optio officia odit natus accusamus, libero iure nam? Accusantium veritatis ad repellat.</p>
</div>
<div class="aside">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda officiis sunt laboriosam impedit fuga tenetur pariatur distinctio ipsum suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda officiis sunt laboriosam impedit fuga tenetur pariatur distinctio ipsum suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda officiis sunt laboriosam impedit fuga tenetur pariatur distinctio ipsum suscipit.</p>
</div>
</div>
</div>

Changing the color of a fixed-position div while scrolling

I am experimenting with a very basic layout that has 4 divs, the first and third divs have dark blue backgrounds and the second and fourth have white backgrounds. I have a div in fixed position to the right with a default white color. I need to write some code that if this fixed div is scrolled through the white background divs, it changes its color to black, if it scrolled in the blue, it remains white as it is.
I tinkered for a whole day with getClientBoundingRect() and the IntersectionObserver API and I didn't have any luck.
Here is the code of the basic layout:
const oddElems = document.querySelectorAll('.oddElem');
const evenElems = document.querySelectorAll('.evenElem');
const allElems = document.querySelectorAll('.elem');
function handleInteresection(entries) {
entries.forEach(entry => {
console.log(entry)
})
}
const observer = new IntersectionObserver(handleInteresection);
allElems.forEach(elem => {
observer.observe(elem);
})
* {
box-sizing: border-box;
}
body {
width: 70%;
margin: auto;
padding: 0;
}
.elem {
border: 2px solid;
}
#elem {
background: #007;
padding: 20rem;
color: white;
}
#elem2 {
padding: 20rem;
background: #fff;
}
#elem3 {
padding: 20rem;
background: #007;
}
#elem4 {
padding: 20rem;
background: #fff;
}
#flyingbox {
padding: 2rem;
width: 2rem;
left: 80%;
position: fixed;
top: 10px;
background: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Bounding</title>
</head>
<body>
<div id="flyingbox">
</div>
<div class="elem oddElem" id="elem">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa blanditiis reprehenderit odio, eos
recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores. Quis quibusdam odit, unde
minus?
</p>
</div>
<div class="elem evenElem" id="elem2">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa blanditiis reprehenderit odio, eos
recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores. Quis quibusdam odit, unde
minus?
</p>
</div>
<div class="elem oddElem" id="elem3">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa blanditiis reprehenderit odio, eos
recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores. Quis quibusdam odit, unde
minus?
</p>
</div>
<div class="elem evenElem" id="elem4">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa blanditiis reprehenderit odio, eos
recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores. Quis quibusdam odit, unde
minus?
</p>
</div>
</body>
</html>

It doesn't look like you have any event listener to track the current scroll position. Basically I created an array of each section's offsetTop (distance from parent top) in reverse order, and conditionally check whether window.scrollY (current scroll position) matches an even or odd index.
const allElems = document.querySelectorAll('.elem');
const offsetTops = Array.from(allElems).map(ele => ele.offsetTop).reverse();
const flyingBox = document.getElementById("flyingbox");
window.addEventListener("scroll", ()=> {
const isBlack = offsetTops.findIndex(offsetTop => window.scrollY + 45 > offsetTop)%2 === 0 ? true : false;
if(flyingBox.classList.contains("black") && !isBlack) flyingBox.classList.toggle("black");
if(!flyingBox.classList.contains("black") && isBlack) flyingBox.classList.toggle("black");
});
* {
box-sizing: border-box;
}
body {
width: 70%;
margin: auto;
padding: 0;
}
.elem {
border: 2px solid;
}
#elem {
background: #007;
padding: 20rem;
color: white;
}
#elem2 {
padding: 20rem;
background: #fff;
}
#elem3 {
padding: 20rem;
background: #007;
}
#elem4 {
padding: 20rem;
background: #fff;
}
#flyingbox {
padding: 2rem;
width: 2rem;
left: 80%;
position: fixed;
top: 10px;
background: #fff;
}
.black {
background-color: black !important;
}
It doesn't look like you have an event listener to retrieve the current scroll position:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Bounding</title>
</head>
<body>
<div id="flyingbox">
</div>
<div class="elem oddElem" id="elem">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa blanditiis reprehenderit odio, eos
recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores. Quis quibusdam odit, unde
minus?
</p>
</div>
<div class="elem evenElem" id="elem2">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa blanditiis reprehenderit odio, eos
recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores. Quis quibusdam odit, unde
minus?
</p>
</div>
<div class="elem oddElem" id="elem3">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa blanditiis reprehenderit odio, eos
recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores. Quis quibusdam odit, unde
minus?
</p>
</div>
<div class="elem evenElem" id="elem4">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa blanditiis reprehenderit odio, eos
recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores. Quis quibusdam odit, unde
minus?
</p>
</div>
</body>
</html>

How to vertically grow and shrink menu (with animation)

How can I mimmick the effect that is used for the Contents list on Wikipedia pages when I click on the show/hide toggle? I also want the toggle to go next to the 'Contents' title but it's not working.
.contents_list {
background-color: #fff;
color: #000;
display: inline-block;
padding: 20px;
font-size: 1.25em;
line-height: 1.25;
box-shadow: 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.45);
}
.toggle {
display: inline;
}
.contents_list h3 {
font-size: 1.7em;
line-height: 100%;
color: #000;
}
.contents_list a {
font-size: 1.25em;
line-height: 100%;
text-decoration: none;
position: relative;
color: #000;
}
.contents_list ol {
counter-reset: item;
list-style-type: decimal;
}
.contents_list li {
margin-bottom: 20px;
display: block;
}
<div class="contents_list">
<h2>Contents</h2><span class="toggle"> [<a role="button" tabindex="0" id="togglelink">show</a>] </span>
<ol>
<li><a>A1</a>
</li>
<li><a>A2</a>
</li>
</ol>
</div>

For the first option you can use JQuery toggle function toggle()
And for the second option use html bookmarks, give ID to section and then use that ID in a tag to navigate.
$('#togglelink').click(function() {
$('ol').toggle(300);
if ($(this).text() == "show")
$(this).text("hide")
else
$(this).text("show");
})
.contents_list {
background-color: #fff;
color: #000;
display: inline-block;
padding: 20px;
font-size: 1.25em;
line-height: 1.25;
box-shadow: 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.45);
}
.toggle {
display: inline;
}
.contents_list h3 {
font-size: 1.7em;
line-height: 100%;
color: #000;
}
.contents_list a {
font-size: 1.25em;
line-height: 100%;
text-decoration: none;
position: relative;
color: #000;
}
.contents_list ol {
counter-reset: item;
list-style-type: decimal;
}
.contents_list li {
margin-bottom: 20px;
display: block;
}
h2{
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents_list">
<h2>Contents</h2><span class="toggle"> [<a role="button" tabindex="0" id="togglelink">hide</a>] </span>
<ol>
<li>A1
</li>
<li>A2
</li>
</ol>
</div>
<div id="firstBookmark">
<h1>A1</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda ipsa, quis ipsum dolor, numquam sint quasi. Culpa mollitia voluptatum nisi, libero, perferendis fugiat laboriosam enim iusto accusantium rem quam pariatur.\Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Assumenda ipsa, quis ipsum dolor, numquam sint quasi. Culpa mollitia voluptatum nisi, libero, perferendis fugiat laboriosam enim iusto accusantium rem quam pariatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Assumenda ipsa, quis ipsum dolor, numquam sint quasi. Culpa mollitia voluptatum nisi, libero, perferendis fugiat laboriosam enim iusto accusantium rem quam pariatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda ipsa, quis ipsum
dolor, numquam sint quasi. Culpa mollitia voluptatum nisi, libero, perferendis fugiat laboriosam enim iusto accusantium rem quam pariatur.
</div>
<div id="secondBookmark">
<h1>A2</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda ipsa, quis ipsum dolor, numquam sint quasi. Culpa mollitia voluptatum nisi, libero, perferendis fugiat laboriosam enim iusto accusantium rem quam pariatur.\Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Assumenda ipsa, quis ipsum dolor, numquam sint quasi. Culpa mollitia voluptatum nisi, libero, perferendis fugiat laboriosam enim iusto accusantium rem quam pariatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Assumenda ipsa, quis ipsum dolor, numquam sint quasi. Culpa mollitia voluptatum nisi, libero, perferendis fugiat laboriosam enim iusto accusantium rem quam pariatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda ipsa, quis ipsum
dolor, numquam sint quasi. Culpa mollitia voluptatum nisi, libero, perferendis fugiat laboriosam enim iusto accusantium rem quam pariatur.
</div>

Dynamic changing height to tallest div on window resize

I am trying to use jQuery to set a set of div to the heigh of the tallest div. I have got the initial function working, where it gets the site and applies it to the rest of the divs on the page.
I also am trying to recalculate the heigh of the div in resize. In the JSfiddle, you can see that when you shrink the text expands out of the card/div.
I have tried to put the function into the resize function however in doesn't re-fire. I'm not sure what i am doing wrong.
I'm a JS beginner, apologies.
HTML
<div class="fluid-container grey-bg">
<div class="container">
<div class="card-default width-25 items">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque hic aliquid ea id, perferendis mollitia nam consequatur, ut rerum animi nisi iste, quae provident atque placeat repudiandae impedit delectus sequi.
</div>
</div>
<div class="card-default width-25 spacer items">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ex sed voluptatum rem iste
</div>
</div>
<div class="card-default width-25 spacer items">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis omnis, quos id quaerat magni nobis blanditiis, esse magnam provident cupiditate harum non! Modi cupiditate earum eos repudiandae impedit nemo repellendus!
</div>
</div>
<div class="card-default width-25 items">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid laboriosam magni placeat numquam
</div>
</div>
</div>
</div>
CSS
.card-default {
background-color: #fff;
border-radius: 10px;
color: #333333;
min-height: 100px;
box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.25);
box-sizing: border-box;
padding: 20px 0px;
text-align: center;
margin-bottom: 20px;
display: block;
float: left;
position: relative;
width: 100%;
}
.card-default.width-25 {
width: 23%;
margin-left: 0px;
margin-right: 0px;
padding: 20px 20px;
}
JS
function cardEqualHeight() {
var maxHeight = -1;
$('.items').each(function() {
maxHeight = maxHeight >= $(this).height() ? maxHeight : $(this).height();
});
$('.items .content').each(function() {
$(this).height(maxHeight);
});
}
cardEqualHeight();
https://jsfiddle.net/k3lh4m/7wmfox9m/

Add this to the containter class and don't use your JS function and there you go!
.container {
display: flex;
flex-wrap: wrap;
}
jsfiddle