We Keep Coding

How to align boxes right under each other with flexbox

The point is that I want to implement this layout with html, css and js.
When you click on the button, the container should alternately become taller/smaller.
picture 1
picture 2
However, no fixed height should be passed, as is currently implemented.
Without using max-height, scaleY.
Also, text5 should be right under text2 and text6 right under text3 (as you can see in the picture) without using width or something similar.
The flex items should only be as large as the content.
I've also searched for solutions, but the search results weren't what I was looking for.
How can I transition height: 0; to height: auto; using CSS?
Flexbox not giving equal width to elements
Align divs under each other
let isOpen = false;
function toggleHeight() {
let row2 = document.getElementById('row2');
if(!isOpen){
isOpen= !isOpen;
row2.style.height = '120px';
//row2.style.height = 'auto';
}
else{
isOpen= !isOpen;
row2.style.height = '0';
}
}
.row1, .row2 {
display: flex;
gap: 10px;
background-color: #ccc;
}
.row2 {
height: 0;
transition: 0.25s ease;
overflow: hidden;
}
.col1 {
display:flex;
}
<div onclick="toggleHeight()">Click Me</div>
<div class="row1">
<div class="col1">
<div>
<div>text</div>
<div>text</div>
</div>
<div>
<div>text</div>
<div>text</div>
</div>
<div>
<div>text</div>
<div>text</div>
</div>
</div>
<div class="col2">
<div>text2</div>
<div>text2</div>
</div>
<div class="col2">
<div>text3</div>
<div>text3</div>
</div>
</div>
<div id="row2" class="row2">
<div class="col1">
<div>text4</div>
<div>text4</div>
</div>
<div class="col2">
<div>text5</div>
<div>text5</div>
</div>
<div class="col2">
<div>text6</div>
<div>text6</div>
</div>
</div>

I created exactly you wanted but the transition on height is not working!
const button = document.querySelector('button')
const row2 = document.querySelector('#row-2')
button.addEventListener('click', () => {
row2.classList.toggle('visible')
})
#import "https://cdn.jsdelivr.net/gh/KunalTanwar/normalize/css/normalize.inter.min.css";
body {
height: 100%;
display: grid;
place-items: center;
}
button {
padding: 4px;
border: 1px solid #c1c1c1;
}
.flex {
margin-top: 32px;
display: flex;
flex-direction: column;
}
.flex .row {
display: inherit;
column-gap: 16px;
}
.flex .row .col {
display: inherit;
padding-inline: 16px;
flex-direction: column;
}
.flex .row#row-2 {
height: 0px;
overflow: hidden;
background-color: red;
transition: height 250ms ease, overflow 250ms ease;
}
.flex .row#row-2.visible {
height: auto;
overflow: visible;
}
<div>
<button>Click Me!</button>
<div class="flex">
<div class="row" id="row-1">
<div class="col">
<span>texttexttext</span>
<span>texttexttext</span>
</div>
<div class="col">
<span>text2</span>
<span>text2</span>
</div>
<div class="col">
<span>text3</span>
<span>text3</span>
</div>
</div>
<div class="row" id="row-2">
<div class="col" style="align-self: center;">texttexttext</div>
<div class="col">
<span>text5</span>
<span>text5</span>
</div>
<div class="col">
<span>text6</span>
<span>text6</span>
</div>
</div>
</div>
</div>
P.S - remove padding-inline from .col.

How do I toggle visibility of an entire dynamic row (flex wrap)?

Current Behavior
I have the following basic structure:
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content">Content</div>
</div>
<!-- ... dozens of .boxes ... -->
</section>
#containers is .display: flex; flex-wrap: wrap, so the number of boxes on any one row is dynamic. This is an important feature that must be maintained.
Here's a minimal working example:
$(document).ready(function() {
$(".collapsible").click(function() {
$( this ).next().slideToggle();
});
});
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
.collapsible:hover {
background: #aaf;
}
.content {
margin: 0.5em;
margin-left: 16px;
display: none; /* Initially collapsed */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box3">
<div class="collapsible"><h2>Box 3</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box4">
<div class="collapsible"><h2>Box 4</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box5">
<div class="collapsible"><h2>Box 5</h2></div>
<div class="content">Content</div>
</div>
</section>
</body>
I can easily use .slideToggle() to toggle visibility of a sibling (.content) underneath one of the clickable .collapsible divs:
$(".collapsible").click(function() {
$( this ).next().slideToggle();
});
Desired Behavior and Remarks
What I'd like is, on click of any .collapsible div in a row, the entire row will be toggled. That is, every .content div on the same horizontal row as displayed in the current viewport.
This must handle rows with dynamic number of columns, including viewport resizing. I'm flexible on the precise behavior, though.
Is this possible? And how much will it hurt?🙂 Changes to the document structure (such as adding some sort of row container) are OK, and I don't mind using some JS/jQuery code of course. The main thing I can't do is hard code the number of columns, as I need my site to remain responsive on vertical phones and fullscreen desktop browsers.

Maybe the jQuery slideToggle() function is not the best method.
Since a row will be the same height , you may look at a method to set size from 0 to another value. anybox resized will stretch other boxes on the same row.
here an example of the idea, setting a max-height from 0 to 200px and a transition.
it toggles a class.
$(document).ready(function() {
$(".collapsible").click(function() {
this.classList.toggle('slide');// plain javascript to toggle a class
});
});
*{box-sizing:border-box}
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
p{margin-top:0;}
.collapsible:hover {
background: #aaf;
}
.content {
margin:0 0.5em;
margin-left: 16px;
max-height:0; /* Initially collapsed */
transition:0.5s
}
.slide + .content{max-height:400px;/* which one got the class*/ color:darkred}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content"><p>Content</p></div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content"><p>Content</p><p>Content</p></div>
</div>
<div class="box" id="box3">
<div class="collapsible"><h2>Box 3</h2></div>
<div class="content"><p>Content</p></div>
</div>
<div class="box" id="box4">
<div class="collapsible"><h2>Box 4</h2></div>
<div class="content"><p>Content</p><p>Content</p><p>Content</p></div>
</div>
<div class="box" id="box5">
<div class="collapsible"><h2>Box 5</h2></div>
<div class="content"><p>Content</p></div>
</div>
</section>
</body>
What you are missing here , is to set the height of the row to the height of the taller box, unless they will all be the same height.
For this, you can look for every box at the same top offset that the one clicked, and look for the tallest innercontent of the .contents and use this height .
Here comes the idea looking where each are standing and resets a max-height rule, you can inspire from too:
// defaut : supposed to be with no class 'slide' set on html elements
$(document).ready(function () {
let boxes = document.querySelectorAll(".collapsible");
let contents = document.querySelectorAll(".content");
$(".collapsible").click(function (event) {
let arrayContent = [];//reset
let hide=false;
for (i = 0; i < contents.length; i++) {
contents[i].style.maxHeight = "min-content";
let index = i;
let heightC = contents[i].offsetTop;
let boxOffset = contents[i].parentNode.offsetTop + 1;
// a few infos .add/remove what is needed
arrayContent.push({
index,
heightC,
boxOffset
});
contents[i].setAttribute("style", "");// resets inline style
}
let rowOffset = this.offsetTop;
if(this.classList.contains('slide')) {
hide=true;
}
let classState = this.classList;
arrayContent.forEach(function (obj) {
if (obj.boxOffset == rowOffset) {
if(hide == true) boxes[obj.index].classList.add('slide');/* reset needed if window resized => rows reorganized ? */
boxes[obj.index].classList.toggle("slide");
} else {
boxes[obj.index].classList.remove("slide");
}
});
});
});
* {
box-sizing: border-box
}
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
p {
margin-top: 0;
}
.collapsible:hover {
background: #aaf;
}
.content {
margin: 0 0.5em;
margin-left: 16px;
max-height: 0;
/* Initially collapsed */
transition: max-height 0.5s!important
}
.slide~.content {
max-height: 400px;
/* which one got the class*/
color: darkred;
}
.collapsible:before {
content: attr(class)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible">
<h2>Box 1</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
<div class="box" id="box2">
<div class="collapsible">
<h2>Box 2</h2>
</div>
<div class="content">
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="box" id="box3">
<div class="collapsible">
<h2>Box 3</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
<div class="box" id="box4">
<div class="collapsible">
<h2>Box 4</h2>
</div>
<div class="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="box" id="box5">
<div class="collapsible">
<h2>Box 5</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
</section>
</body>

Accordion not working correctly (active states not being applied for each parent instance)

I have accordions which on click, grow in height and also changes the image to what is relevant to that section (this is done based on data-id).
Here are the requirements that I'm trying to achieve:
Each accordion group is contained within .accordionRepeater__wrapper and for each instance of that class, I'm trying to get the first .accordionCard. to have the open state.
Only have the first .accordionCard in each accordionRepeater__wrapper open on page load, so the user can see some content by default.
Only have one .accordionCard in each accordionRepeater__wrapper open at a time (user cannot have two or more accordionCard open in a accordionRepeater__wrapper at one time).
Currently results:
The first .accordionCard in the first .accordionRepeater__wrapper has the class of .accordionCard--open on page load, but doesn't show the content for it.
The first instance of .accordionCard in the second .accordionRepeater__wrapper doesn't have the class of .accordionCard--open and doesn't show the image. Only when I click on it does the image and content show.
See my attempt here:
$(function() {
const card = $(".accordionCard");
const expand_icon = $(".accordionCard__expand");
// open first accordion in each .accordionRepeater__wrapper by default
$(".accordionCard:first accordionCard__expand").addClass("expanded");
$(".accordionCard:first").addClass("accordionCard--open");
$(".accordionRepeater__image:first").addClass("d-block");
card.click(function() {
var hidden = $(this).children(".accordionCard__body--hidden");
// only have one card open at a time
expand_icon.removeClass("expanded");
card.removeClass("accordionCard--open");
/* CLOSE CARD */
if ($(this).hasClass("accordionCard--open")) {
TweenMax.to(hidden, 0.3, {
height: 0,
immediateRender: false,
ease: Power1.easeOut
});
$(this).removeClass("accordionCard--open");
$(this).find(expand_icon).removeClass("expanded");
}
/* OPEN CARD */
else {
TweenMax.set(hidden, {
height: "auto"
});
TweenMax.from(hidden, 1, {
height: 0,
immediateRender: false,
ease: Back.easeOut
});
$(this).addClass("accordionCard--open");
$(this).find(expand_icon).addClass("expanded");
// show correct image
var id = $(this).attr('data-item');
$(".accordionRepeater__image").removeClass("d-block");
$(".accordionRepeater__image[data-item='" + id + "']").addClass("d-block");
}
/* END */
});
});
:root {
--green: #089F84;
--white-2: #F7F7F7;
--black-2: #2C3645;
}
.accordionRepeater {
padding: 130px 0 156px 0;
}
.accordionRepeater__wrapper {
padding-bottom: 140px;
}
.accordionRepeater__wrapper:last-child {
padding-bottom: 0;
}
.accordionRepeater__row--even {
flex-direction: row-reverse;
}
.accordionRepeater .accordionCard {
margin: 13px 0;
cursor: pointer;
padding-left: 26px;
}
.accordionRepeater .accordionCard:hover .accordionCard__body-label {
color: var(--green);
}
.accordionRepeater .accordionCard--open {
background-color: var(--white-2);
padding: 36px 48px 45px 26px;
border-radius: 10px;
}
.accordionRepeater .accordionCard__expand {
position: absolute;
}
.accordionRepeater .accordionCard__expand:before,
.accordionRepeater .accordionCard__expand:after {
content: "";
display: block;
position: absolute;
top: 50%;
transform: translate(0px, 10px);
right: 0;
margin: 0 0 -8px;
background-color: var(--green);
border-radius: 5px;
}
.accordionRepeater .accordionCard__expand:before {
right: 8px;
width: 3px;
height: 16px;
transition: all 0.5s ease;
margin-top: -7.5px;
}
.accordionRepeater .accordionCard__expand:after {
right: 1px;
width: 16px;
height: 3px;
margin-top: -1.5px;
}
.accordionRepeater .accordionCard__expand.expanded:before,
.accordionRepeater .accordionCard__expand.expanded:after {
background-color: var(--black-2);
}
.accordionRepeater .accordionCard__expand.expanded:before {
height: 0;
margin-top: 0;
}
.accordionRepeater .accordionCard__body {
margin-left: 20px;
}
.accordionRepeater .accordionCard__body--visible {
width: 100%;
}
.accordionRepeater .accordionCard__body--hidden {
overflow: hidden;
height: 0;
}
.accordionRepeater .accordionCard__body-label {
transition: all 0.5s ease;
margin-left: 20px;
}
.accordionRepeater .accordionCard__body-copy {
padding: 24px 0 17px 0;
}
.accordionRepeater .accordionCard__body-link {
transition: none;
}
.accordionRepeater__image {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="accordionRepeater">
<div class="container">
<!-----------
-- FIRST SET
-------------->
<div class="accordionRepeater__wrapper">
<div class="row justify-content-between align-items-center accordionRepeater__row accordionRepeater__row--odd">
<div class="col-12 col-lg-6">
<div class="accordionRepeater__text">
<div class="accordionRepeater__text-accordion">
<!-- CARD 1 -->
<div class="accordionCard position-relative d-flex flex-column" data-item="1">
<div class="accordionCard__body">
<div class="accordionCard__expand"></div>
<span class="accordionCard__body-label d-block">Lorum</span>
</div>
<div class="accordionCard__body--hidden">
<div class="accordionCard__body-copy">
<p>Lorum ipsum</p>
</div>
</div>
</div>
<!-- CARD 2 -->
<div class="accordionCard position-relative d-flex flex-column" data-item="2">
<div class="accordionCard__body">
<div class="accordionCard__expand"></div>
<span class="accordionCard__body-label d-block">Lorum 2</span>
</div>
<div class="accordionCard__body--hidden">
<div class="accordionCard__body-copy">
<p>Lorum ipsum 2</p>
</div>
</div>
</div>
<!-- CARD END -->
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="accordionRepeater__graphic">
<img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="1">
<img class="accordionRepeater__image" src="https://picsum.photos/550" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="2">
<img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="3">
</div>
</div>
</div>
</div>
<!-----------
-- FIRST SET END
-------------->
<!-----------
-- SECOND SET
-------------->
<div class="accordionRepeater__wrapper">
<div class="row justify-content-between align-items-center accordionRepeater__row accordionRepeater__row--even">
<div class="col-12 col-lg-6">
<div class="accordionRepeater__text">
<div class="accordionRepeater__text-accordion">
<!-- CARD 1 -->
<div class="accordionCard position-relative d-flex flex-column" data-item="1">
<div class="accordionCard__body">
<div class="accordionCard__expand"></div>
<span class="accordionCard__body-label d-block">Lorum</span>
</div>
<div class="accordionCard__body--hidden">
<div class="accordionCard__body-copy">
<p>Lorum ipsum</p>
</div>
</div>
</div>
<!-- CARD END -->
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="accordionRepeater__graphic">
<img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="1">
</div>
</div>
</div>
</div>
<!-----------
-- SECOND SET END
-------------->
</div>
</div>

You are not expanding the accordions at the start. You are doing it only on click.
Also the method needs to handle expansion and close at set level. And not globally.
It can be done like this:
$(function() {
const card = $('.accordionCard');
const expand_icon = $('.accordionCard__expand');
$('.accordionCard:first-child').each((i, a) => toggleAc(a));
card.click(function() {
toggleAc(this);
});
// expand/close given accordions
function toggleAc(acdn) {
var hidden = $(acdn).children('.accordionCard__body--hidden');
const isOpen = $(acdn).hasClass('accordionCard--open');
/* CLOSE CARD */
if (isOpen) {
return; // this ensures that at least one will remain open all the time
/*TweenMax.to(hidden, 0.3, {
height: 0,
immediateRender: false,
ease: Power1.easeOut,
});
$(acdn).removeClass('accordionCard--open');
$(acdn).find(expand_icon).removeClass('expanded');
*/
} else {
// close previous card in the same set
const parent = $(acdn).parent();
const expandedCard = parent.find('.accordionCard--open');
const expandedIcon = parent.find('.expanded');
const expandedCardHidden = expandedCard.children('.accordionCard__body--hidden');
TweenMax.to(expandedCardHidden, 0.3, {
height: 0,
immediateRender: false,
ease: Power1.easeOut,
});
expandedIcon.removeClass('expanded');
expandedCard.removeClass('accordionCard--open');
/* OPEN CARD */
TweenMax.set(hidden, {
height: 'auto',
});
TweenMax.from(hidden, 1, {
height: 0,
immediateRender: false,
ease: Back.easeOut,
});
$(acdn).addClass('accordionCard--open');
$(acdn).find(expand_icon).addClass('expanded');
// show correct image
var id = $(acdn).attr('data-item');
const grandParent = parent.parent().parent().parent();
grandParent.find('.accordionRepeater__image').removeClass('d-block');
grandParent
.find(".accordionRepeater__image[data-item='" + id + "']")
.addClass('d-block');
}
/* END */
}
});
:root {
--green: #089f84;
--white-2: #f7f7f7;
--black-2: #2c3645;
}
.accordionRepeater {
padding: 130px 0 156px 0;
}
.accordionRepeater__wrapper {
padding-bottom: 140px;
}
.accordionRepeater__wrapper:last-child {
padding-bottom: 0;
}
.accordionRepeater__row--even {
flex-direction: row-reverse;
}
.accordionRepeater .accordionCard {
margin: 13px 0;
cursor: pointer;
padding-left: 26px;
}
.accordionRepeater .accordionCard:hover .accordionCard__body-label {
color: var(--green);
}
.accordionRepeater .accordionCard--open {
background-color: var(--white-2);
padding: 36px 48px 45px 26px;
border-radius: 10px;
}
.accordionRepeater .accordionCard__expand {
position: absolute;
}
.accordionRepeater .accordionCard__expand:before,
.accordionRepeater .accordionCard__expand:after {
content: '';
display: block;
position: absolute;
top: 50%;
transform: translate(0px, 10px);
right: 0;
margin: 0 0 -8px;
background-color: var(--green);
border-radius: 5px;
}
.accordionRepeater .accordionCard__expand:before {
right: 8px;
width: 3px;
height: 16px;
transition: all 0.5s ease;
margin-top: -7.5px;
}
.accordionRepeater .accordionCard__expand:after {
right: 1px;
width: 16px;
height: 3px;
margin-top: -1.5px;
}
.accordionRepeater .accordionCard__expand.expanded:before,
.accordionRepeater .accordionCard__expand.expanded:after {
background-color: var(--black-2);
}
.accordionRepeater .accordionCard__expand.expanded:before {
height: 0;
margin-top: 0;
}
.accordionRepeater .accordionCard__body {
margin-left: 20px;
}
.accordionRepeater .accordionCard__body--visible {
width: 100%;
}
.accordionRepeater .accordionCard__body--hidden {
overflow: hidden;
height: 0;
}
.accordionRepeater .accordionCard__body-label {
transition: all 0.5s ease;
margin-left: 20px;
}
.accordionRepeater .accordionCard__body-copy {
padding: 24px 0 17px 0;
}
.accordionRepeater .accordionCard__body-link {
transition: none;
}
.accordionRepeater__image {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<div class="accordionRepeater">
<div class="container">
<!-----------
-- FIRST SET
-------------->
<div class="accordionRepeater__wrapper">
<div class="row justify-content-between align-items-center accordionRepeater__row accordionRepeater__row--odd">
<div class="col-12 col-lg-6">
<div class="accordionRepeater__text">
<div class="accordionRepeater__text-accordion">
<!-- CARD 1 -->
<div class="accordionCard position-relative d-flex flex-column" data-item="1">
<div class="accordionCard__body">
<div class="accordionCard__expand"></div>
<span class="accordionCard__body-label d-block">Lorum</span>
</div>
<div class="accordionCard__body--hidden">
<div class="accordionCard__body-copy">
<p>Lorum ipsum</p>
</div>
</div>
</div>
<!-- CARD 2 -->
<div class="accordionCard position-relative d-flex flex-column" data-item="2">
<div class="accordionCard__body">
<div class="accordionCard__expand"></div>
<span class="accordionCard__body-label d-block">Lorum 2</span>
</div>
<div class="accordionCard__body--hidden">
<div class="accordionCard__body-copy">
<p>Lorum ipsum 2</p>
</div>
</div>
</div>
<!-- CARD END -->
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="accordionRepeater__graphic">
<img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="1" />
<img class="accordionRepeater__image" src="https://picsum.photos/550" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="2" />
<img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="3" />
</div>
</div>
</div>
</div>
<!-----------
-- FIRST SET END
-------------->
<!-----------
-- SECOND SET
-------------->
<div class="accordionRepeater__wrapper">
<div class="row justify-content-between align-items-center accordionRepeater__row accordionRepeater__row--even">
<div class="col-12 col-lg-6">
<div class="accordionRepeater__text">
<div class="accordionRepeater__text-accordion">
<!-- CARD 1 -->
<div class="accordionCard position-relative d-flex flex-column" data-item="1">
<div class="accordionCard__body">
<div class="accordionCard__expand"></div>
<span class="accordionCard__body-label d-block">Lorum</span>
</div>
<div class="accordionCard__body--hidden">
<div class="accordionCard__body-copy">
<p>Lorum ipsum</p>
</div>
</div>
</div>
<!-- CARD END -->
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="accordionRepeater__graphic">
<img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="1" />
</div>
</div>
</div>
</div>
<!-----------
-- SECOND SET END
-------------->
</div>
</div>

Change this line:
if ($(this).hasClass("accordionCard--open")) {
To:
if ($(this).hasClass("accordionCard--open") == true) {
Otherwise, it doesn't really do anything. I Hope this is what you needed!

How can i change html or javascript code, so when i click divs even it doesnt work .How can I fix it?

So, I want to write js code for menubar in my page and it doesn't work
Firstly, i think that i make some mistakes in div classes, such as places of div.
Secondly, maybe i make mistake in JS code syntax but I look at console and there is not problem in debugging part.
Also, in JS part i can access all classes which i write in js code
let section2Menubar = document.querySelectorAll('section-2-menubar');
for(let i=0;i<section2Menubar.length;i++){
section2Menubar[i].addEventListener('click', () => {
for(let j=0;j<section2Menubar.length;j++){
section2Menubar[j].children[0].classList.remove('menubar-options-active');
section2Menubar[j].children[1].classList.remove('menubar-triangles-active');
}
section2Menubar[i].children[0].classList.add('menubar-options-active');
section2Menubar[i].children[1].classList.add('menubar-triangles-active');
})
}
#section-2-main-menubar-articles{
margin: 48px 120px;
display: flex;
}
.menubar-options {
display: block;
border: 1px solid #EBEBEB;
padding: 20px 60px;
margin-bottom: -3px;
text-align: center;
color: #717171;
}
.menubar-triangles {
display: none;
}
.menubar-triangles-active {
display: block;
margin-left: 113px;
}
.menubar-options-active {
background-color: #18CFAB;
color: #ffffff;
}
<div id="section-2-main-menubar-articles">
<div class="section-2-menubar">
<div class="menubar-options-active menubar-options">Web Design</div>
<img class="menubar-triangles-active menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60#1X.png">
</div>
<div class="section-2-menubar">
<div class="menubar-options">Graphic Design</div>
<img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60#1X.png">
</div>
<div class="section-2-menubar">
<div class="menubar-options">Online Support</div>
<img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60#1X.png">
</div>
<div class="section-2-menubar">
<div class="menubar-options">App Design</div>
<img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60#1X.png">
</div>
<div class="section-2-menubar">
<div class="menubar-options">Online Marketing</div>
<img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60#1X.png">
</div>
<div class="section-2-menubar">
<div class="menubar-options" class="menubar-triangles">Seo Service</div>
<img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60#1X.png">
</div>
</div>
</div>

section-2-menubar of document.querySelectorAll method's arguments is present section-2-menubar element. Here, section-2-menubar is class. Therefore, you need to change section-2-menubar to .section-2-menubar.
let section2Menubar = document.querySelectorAll('.section-2-menubar'); // change
for (let i = 0; i < section2Menubar.length; i++) {
section2Menubar[i].addEventListener('click', () => {
for (let j = 0; j < section2Menubar.length; j++) {
section2Menubar[j].children[0].classList.remove('menubar-options-active');
section2Menubar[j].children[1].classList.remove('menubar-triangles-active');
}
section2Menubar[i].children[0].classList.add('menubar-options-active');
section2Menubar[i].children[1].classList.add('menubar-triangles-active');
})
}
let section2Menubar = document.querySelectorAll('.section-2-menubar');
for (let i = 0; i < section2Menubar.length; i++) {
section2Menubar[i].addEventListener('click', () => {
for (let j = 0; j < section2Menubar.length; j++) {
section2Menubar[j].children[0].classList.remove('menubar-options-active');
section2Menubar[j].children[1].classList.remove('menubar-triangles-active');
}
section2Menubar[i].children[0].classList.add('menubar-options-active');
section2Menubar[i].children[1].classList.add('menubar-triangles-active');
})
}
#section-2-main-menubar-articles {
margin: 48px 120px;
display: flex;
}
.menubar-options {
display: block;
border: 1px solid #EBEBEB;
padding: 20px 60px;
margin-bottom: -3px;
text-align: center;
color: #717171;
}
.menubar-triangles {
display: none;
}
.menubar-triangles-active {
display: block;
margin-left: 113px;
}
.menubar-options-active {
background-color: #18CFAB;
color: #ffffff;
}
<div id="section-2-main-menubar-articles">
<div class="section-2-menubar">
<div class="menubar-options-active menubar-options">Web Design</div>
<img class="menubar-triangles-active menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60#1X.png">
</div>
<div class="section-2-menubar">
<div class="menubar-options">Graphic Design</div>
<img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60#1X.png">
</div>
<div class="section-2-menubar">
<div class="menubar-options">Online Support</div>
<img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60#1X.png">
</div>
<div class="section-2-menubar">
<div class="menubar-options">App Design</div>
<img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60#1X.png">
</div>
<div class="section-2-menubar">
<div class="menubar-options">Online Marketing</div>
<img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60#1X.png">
</div>
<div class="section-2-menubar">
<div class="menubar-options" class="menubar-triangles">Seo Service</div>
<img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60#1X.png">
</div>
</div>
</div>

Alert icon notifications

would you know, how to create notifications which are displayed under the notification bell without using fixed position? I would like to have something clean and resposive if possible. Thank you very much
const bell = document.querySelector("#bell");
const notifications = document.querySelector('#notifications');
const alertBtn = document.querySelector(".active-alert")
bell.addEventListener("click", () => {
alertBtn.style.color =
"white";
notifications.innerHTML += ` <div class="member">
<li>
<span>Notifaction 1</span>
</li> </div> <div class="member">
<li>
<span>Notifaction 2</span>
</li> </div>`;
});
.member {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin: auto;
text-align: center;
background-color: darkgrey;
}
#notifications {
position: fixed;
width: 50%;
top: 70px;
right: 0px;
}
<header>
<div class="header">
<div class="logo">
<h1>YourApp™</h1>
</div>
<div class="userProfile">
<div class="bell">
<img id="bell" src="icons/icon-bell.svg" alt="notifications" height="30" width="30" />
<p class="active-alert">●</p>
<ul id="notifications"></ul>
</div>
<div class="user">
<img src="images/member-1.jpg" alt="Image of member 1" title="image_user_1">
<p>Member 1</p>
</div>
</div>
</div>
</header>

See below. Changes documented in the source code. Hope this helps.
const bell = document.querySelector("#bell");
const notifications = document.querySelector('#notifications');
const alertBtn = document.querySelector(".active-alert")
bell.addEventListener("click", () => {
/* alertBtn.style.color = "white"; Removed */
/* Hide button */
alertBtn.style.display = "none";
notifications.innerHTML += ` <div class="member">
<li>
<span>Notifaction 1</span>
</li> </div> <div class="member">
<li>
<span>Notifaction 2</span>
</li> </div>`;
});
.member {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin: auto;
text-align: center;
background-color: darkgrey;
}
#notifications {
/* position: fixed; Removed */
width: 50%;
/* top: 70px; Removed */
/* right: 0px; Removed */
padding: 0; /* Added */
margin-top: 0 /* Added */
}
/* Added */
.bell {
display: flex;
flex-direction: column;
}
<header>
<div class="header">
<div class="logo">
<h1>YourApp™</h1>
</div>
<div class="userProfile">
<div class="bell">
<img id="bell" src="icons/icon-bell.svg" alt="notifications" height="30" width="30" />
<p class="active-alert">●</p>
<ul id="notifications"></ul>
</div>
<div class="user">
<img src="images/member-1.jpg" alt="Image of member 1" title="image_user_1">
<p>Member 1</p>
</div>
</div>
</div>
</header>