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>

How to slid left/right two divs using jquery?

I am new to coding and I am trying to achieve the following using JQuery:
I have two Divs Where clicking on the first shows some content and clicking the second would hide the content of the first one and show its content instead (Toggling). What I want to do is that I want to keep the same functionality but I want the second Div to slide to the right when I click on the first Div and make a drawer shape and vice versa. I have attached images to it so it may explain more about my idea.
both of contents are hidden by default.
I can't seem to know how to join these two functionalities together
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="box-container">
<div id="div1">
<h1>Title one</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore
quidem ex tenetur ipsum dolore repudiandae molestiae mollitia! Dolore
numquam.
</p>
</div>
<div id="div2">
<h1>Title two</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore
quidem ex tenetur ipsum dolore repudiandae molestiae mollitia! Dolore
numquam.
</p>
</div>
</div>
<div id="contentDiv1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla voluptatem
veritatis assumenda. Obcaecati veniam quo impedit tempora pariatur maiores
ipsa voluptates commodi esse eveniet! Nihil corrupti illum at accusantium
sit? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut veritatis
et molestias? Reprehenderit distinctio sint provident ratione dolorem
veritatis sapiente, fuga amet obcaecati. Laboriosam rerum consectetur nemo
magnam saepe mollitia. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Excepturi sit perferendis earum debitis corrupti dolore commodi
minima consectetur veniam itaque inventore et pariatur sapiente, maxime
quis, in nulla, eos molestias! Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Quasi, incidunt repudiandae perferendis ea praesentium
blanditiis, voluptate accusantium, repellat molestiae quisquam eveniet
earum officia sed assumenda maxime officiis sequi laboriosam! Tempore.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias modi hic
officia iste optio in delectus veniam obcaecati reprehenderit, voluptate
ipsum! Incidunt ducimus animi, id quae blanditiis provident dignissimos
harum?
</div>
<div id="contentDiv2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla voluptatem
veritatis assumenda. Obcaecati veniam quo impedit tempora pariatur maiores
ipsa voluptates commodi esse eveniet! Nihil corrupti illum at accusantium
sit? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut veritatis
et molestias? Reprehenderit distinctio sint provident ratione dolorem
veritatis sapiente, fuga amet obcaecati. Laboriosam rerum consectetur nemo
magnam saepe mollitia. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Excepturi sit perferendis earum debitis corrupti dolore commodi
minima consectetur veniam itaque inventore et pariatur sapiente, maxime
quis, in nulla, eos molestias! Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Quasi, incidunt repudiandae perferendis ea praesentium
blanditiis, voluptate accusantium, repellat molestiae quisquam eveniet
earum officia sed assumenda maxime officiis sequi laboriosam! Tempore.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias modi hic
officia iste optio in delectus veniam obcaecati reprehenderit, voluptate
ipsum! Incidunt ducimus animi, id quae blanditiis provident dignissimos
harum?
</div>
</body>
</html>
CSS
body {
display: inline-block;
margin: 100px 100px 25px 100px;
text-align: center;
}
#box-container {
height: 300px;
display: flex;
}
#div1 {
background: linear-gradient(90deg, #f57350, #fa8282);
width: 50%;
height: 50%;
cursor: pointer;
}
#div2 {
background: linear-gradient(90deg, #a42e5a, #f57350);
width: 50%;
height: 50%;
cursor: pointer;
}
#contentDiv1,
#contetnDiv2 {
margin: 25px;
}
JQuery
jQuery(document).ready(function($){
$('#contentDiv1').hide();
$('#contentDiv2').hide();
$('#div1').on('click', function(){
$('#contentDiv1').slideToggle();
$('#contentDiv2').hide();
});
$('#div2').on('click', function(){
$('#contentDiv2').slideToggle();
$('#contentDiv1').hide();
});
});
attached image

It has more than one solution, and for me, this is my favorite method, I hope it helps you:
$('.tabs .tab').on('click', function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active')
.closest('.tabs').removeClass('active1 active2');
$('.content').hide();
} else {
let i = $(this).index() + 1;
$(this)
.addClass('active')
.siblings('.tab').removeClass('active')
.closest('.tabs').removeClass('active1 active2')
.addClass('active' + i);
$('.content').hide();
$('.content' + i).fadeIn();
}
});
.tabs,
.tabs .tab,
.tabs .content {
border: 1px solid #000;
border-collapse: collapse;
box-sizing: border-box;
}
.tabs {
display: flex;
flex-wrap: wrap;
text-align: center;
position: relative;
}
.tabs.active1 {
padding-left: 0;
padding-right: 65px;
}
.tabs.active2 {
padding-left: 65px;
padding-right: 0;
}
.tabs .tab {
padding: 15px;
cursor: pointer;
min-width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.tabs.active1 .tab,
.tabs.active2 .tab {
min-width: 100%;
width: 100%;
}
.tabs .content {
padding: 15px;
min-width: 100%;
display: none;
}
.tabs.active1 .tab1:not(.active),
.tabs.active2 .tab1:not(.active){
position: absolute;
left: 0;
top: 0;
bottom: 0;
min-width: 65px;
width: 65px;
}
.tabs.active1 .tab2:not(.active),
.tabs.active2 .tab2:not(.active) {
position: absolute;
right: 0;
top: 0;
bottom: 0;
min-width: 65px;
width: 65px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs">
<div class="tab tab1">div1</div>
<div class="tab tab2">div2</div>
<div class="content content1">div content1</div>
<div class="content content2">div content2</div>
</div>

CSS Scroll-snap with children nested in overflow: hidden element

Is it possible to apply scroll-snap to grand-children nested in children with overflow applied ? I can't seem to make it work.
What I aim to do is have a list of div with each a fixed height on which the viewport should snap vertically
html {
margin: 0;
scroll-snap-type: y mandatory;
overflow-x: hidden;
}
.horizontal-scroll {
max-width: 100vw;
}
.child {
width: 150vw;
scroll-snap-align: center;
height: 80vh;
background-color: rgb(143, 204, 241);
padding: 20px 15px;
}
.child:nth-child(even) {
background-color: rgb(133, 243, 155);
}
<!DOCTYPE html>
<html>
<head
</head>
<body>
<div class="horizontal-scroll">
<div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div> <div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div>
<div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div>
</div>
</body>
</html>
Homewer, I would also like the content to be horizontally-scrollable - as their content stretch beyond the viewport width.
They must also scroll together, so using overflow-x on each of them is not possible here.
To do so, I've wrapped the child in a scrollable-wrapper that is horizontally scrollable ( overflow-x : scroll ) and have a fixed width.
And this breaks the vertical scroll snap.
Could someone tell me if there's something I missed or if there's an alternative ?
Note : since each child have a fixed height, I would not mind using scroll-snap-points-y but it has been totally dropped on almost every browser. Is there a way to reproduce this behaviour ?
Edit : I might try this for the snap-point. It's jQuery based.
Vertical scrolling snap jQuery
Snippet
html {
margin: 0;
scroll-snap-type: y mandatory;
overflow-x: hidden;
}
.horizontal-scroll {
max-width: 100vw;
overflow-x: scroll;
}
.child {
width: 150vw;
scroll-snap-align: center;
height: 80vh;
background-color: rgb(143, 204, 241);
padding: 20px 15px;
}
.child:nth-child(even) {
background-color: rgb(133, 243, 155);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="horizontal-scroll">
<div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div> <div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div>
<div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div>
</div>
</body>
</html>

HTML-CSS-JS How can I turn this into a 'text carousel'?

I am trying to recreate a 'text carousel' without any help. I've currently made this (stretch it out, it's not yet responsive). Here is what I'm trying to recreate scroll down to the testimonials section. I've checked their site but they've done this with the use of Bootstrap, I'm trying to recreate it without, only with html, css and probably javascript.
I've check on codepen for text carousels but they are mostly with only one text field and I want to have at least two.
Thanks for helping me out.
PS: The .fa-angle-left and .fa-angle-right are from FontAwesome but I've quickly replaced them with an image from google.

As I can see, you are trying to learn to do it yourself and that's awesome! Keep the good work!
There's multiple ways to achieve this behavior. I won't write the code for you, but here are some steps for you to try and learn:
First, add more .tekstbalonvolledig divs so you can test it.
Second the CSS part:
1 - Add a .wrapper div around .tekstbalonvolledig divs with 1000px width
2 - Add overflow: hidden to .overlaycontainer
Now the JS part:
1 - Create a function that animates a margin-left of -500px on the .wrapper
2 - Add a click event listener to you .fa-angle-left to run this function
Of course there's a lot more things to implement on your carousel, but I hope this will help you to begin :)

Below is the code for carousel..
Below is HTML code
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
</head>
<section id="carousel">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="quote"><i class="fa fa-quote-left fa-4x"></i></div>
<div class="carousel slide" id="fade-quote-carousel" data-ride="carousel" data-interval="3000">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#fade-quote-carousel" data-slide-to="0"></li>
<li data-target="#fade-quote-carousel" data-slide-to="1"></li>
<li data-target="#fade-quote-carousel" data-slide-to="2" class="active"></li>
<li data-target="#fade-quote-carousel" data-slide-to="3"></li>
<li data-target="#fade-quote-carousel" data-slide-to="4"></li>
<li data-target="#fade-quote-carousel" data-slide-to="5"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item">
<div class="profile-circle" style="background-color: rgba(0,0,0,.2);"></div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</blockquote>
</div>
<div class="item">
<div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</blockquote>
</div>
<div class="active item">
<div class="profile-circle" style="background-color: rgba(145,169,216,.2);"></div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</blockquote>
</div>
<div class="item">
<div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</blockquote>
</div>
<div class="item">
<div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</blockquote>
</div>
<div class="item">
<div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Below is the css
section {
padding-top: 100px;
padding-bottom: 100px;
}
.quote {
color: rgba(0,0,0,.1);
text-align: center;
margin-bottom: 30px;
}
#fade-quote-carousel.carousel {
padding-bottom: 60px;
}
#fade-quote-carousel.carousel .carousel-inner .item {
opacity: 0;
-webkit-transition-property: opacity;
-ms-transition-property: opacity;
transition-property: opacity;
}
#fade-quote-carousel.carousel .carousel-inner .active {
opacity: 1;
-webkit-transition-property: opacity;
-ms-transition-property: opacity;
transition-property: opacity;
}
#fade-quote-carousel.carousel .carousel-indicators {
bottom: 10px;
}
#fade-quote-carousel.carousel .carousel-indicators > li {
background-color: #e84a64;
border: none;
}
#fade-quote-carousel blockquote {
text-align: center;
border: none;
}
#fade-quote-carousel .profile-circle {
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 100px;
}
Below is the fiddle link
https://bootsnipp.com/snippets/featured/testimonial-carousel
Dont forget to include bootstrap and jquery library files