We Keep Coding

Rearrange divs - Place each div under each image (javascript - jQuery)

I have the following structure example:
<div class="main">
<div class="image">Image1</div>
<div class="image">Image2</div>
<div class="image">Image3</div>
</div>
<div class="side">
<div class="Banner">Banner1</div>
<div class="Banner">Banner2</div>
<div class="Banner">Banner3</div>
<div class="Banner">Banner4</div>
</div>
I want to make a script that will take each banner and placed under each image.
<div class="main">
<div class="image">Image1</div>
<div class="Banner">Banner1</div>
<div class="image">Image2</div>
<div class="Banner">Banner2</div>
<div class="image">Image3</div>
<div class="Banner">Banner3</div>
<div class="Banner">Banner4</div>
</div>
<div class="side"></div>
Basically there are some images placed one after another and then some banners placed one after another.
Image1
Image2
Image3
Banner1
Banner2
Banner3
Banner4
I need to take each banner and place it under each image so I can have:
Image1
Banner1
Image2
Banner2
Image3
Banner3
Banner4
I cannot change the html to manually placed the banners, I need to use a more advanced script JS and or jquery ..
.content {display:flex; max-width:800px;min-width:300px;gap:20px;margin:auto;}
.main { flex: 70%;}.main2 {max-width:400px;}
.side { flex: 30%; padding:10px;}.img { background:blue;}.banner { background:red;}
.img, .banner { width:100%; min-width:50px; height:50px;display:grid;place-items:center; color: #fff; margin:10px auto;}
<h2>Rearrange content - Place each div (banner) under each image </h2>
<div class="content">
<div class="main">
<div class="img">Image 1</div>
<div class="img">Image 2</div>
<div class="img">Image 3</div>
<div class="img">Image 4</div>
<div class="img">Image 5</div>
<div class="img">Image 6</div>
<p> Multiple DIVs with images ...
<br> ...
</div>
<div class="side">
<div class="banner">Banner1</div>
<div class="banner">Banner2</div>
<div class="banner">Banner3</div>
<div class="banner">Banner4</div>
<div class="banner">Banner5</div>
<div class="banner">Banner6</div>
<div class="banner">Banner7</div>
<div class="banner">Banner8</div>
<div class="banner">Banner9</div>
<div class="banner">Banner10</div>
</div>
</div>
<hr>
<h2> This is how it should look </h2>
<div class="main2">
<div class="img">Image 1</div>
<div class="banner">Banner1</div>
<div class="img">Image 2</div>
<div class="banner">Banner2</div>
<div class="img">Image 3</div>
<div class="banner">Banner3</div>
<div class="img">Image 4</div>
<div class="banner">Banner4</div>
<div class="img">Image 5</div>
<div class="banner">Banner5</div>
<div class="img">Image 6</div>
<div class="banner">Banner6</div>
<div class="banner">Banner7</div>
<div class="banner">Banner8</div>
<div class="banner">Banner9</div>
<div class="banner">Banner10</div>
</div>

To do what you require you can loop through the .banner elements and use their index to place them underneath the related .img element by their indexes using insertAfter(). Something like this:
let $imgs = $('.content .main .img');
$('.content .side .banner').each((i, el) => $(el).insertAfter($imgs[i]));
.content {
display: flex;
max-width: 800px;
min-width: 300px;
gap: 20px;
margin: auto;
}
.main {
flex: 70%;
}
.img,
.banner {
width: 100%;
min-width: 50px;
height: 50px;
display: grid;
place-items: center;
color: #fff;
margin: 10px auto;
}
.img {
background: blue;
}
.banner {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<div class="main">
<div class="img">Image 1</div>
<div class="img">Image 2</div>
<div class="img">Image 3</div>
<div class="img">Image 4</div>
<div class="img">Image 5</div>
<div class="img">Image 6</div>
</div>
<div class="side">
<div class="banner">Banner1</div>
<div class="banner">Banner2</div>
<div class="banner">Banner3</div>
<div class="banner">Banner4</div>
<div class="banner">Banner5</div>
<div class="banner">Banner6</div>
</div>
</div>

Well, to answer my own question, it was hard for me since I don't know JS that well.
I managed to make something that also randomizes the banners and I've used jquery.
jQuery("#btn").click(function() {
var cards = jQuery(".side .banner");
for(var i = 0; i < cards.length; i++){
var target = Math.floor(Math.random() * cards.length -1) + 1;
var target2 = Math.floor(Math.random() * cards.length -1) +1;
cards.eq(target).before(cards.eq(target2));
}
cards = jQuery(".side .banner");
var images = jQuery(".content.desk .img");
if (cards.length < images.length) {
for (var i=0; i<cards.length; i++) {
images.eq(i).after(cards.eq(i));
}
} else {
for (var i=0; i<images.length; i++) {
images.eq(i).after(cards.eq(i))
}
for (var i=images.length; i<cards.length; i++){
cards.eq(i-1).after(cards.eq(i));
}
}
});
body {
max-width:1250px;
margin:auto;
}
h1, h2, h3, h4 {
text-align:center;
}
.content {
display:flex;
max-width:800px;
min-width:300px;
gap:20px;
margin:auto;
}
.main {
flex: 70%;
}
.side {
flex: 30%;
background: lightblue;
padding:10px;
}
.img {
background:blue;
}
.banner {
background:red;
}
.img, .banner {
width:100%;
min-width:50px;
height:50px;
display:grid;
place-items: center;
color: #fff;
margin:10px auto;
}
<body>
<h1>Rearrange content</h1>
<div class="content desk">
<div class="main">
<button id="btn">Click to reorder and randomize</button>
<div class="img">Image 1</div>
<div class="img">Image 2</div>
<div class="img">Image 3</div>
<div class="img">Image 4</div>
<div class="img">Image 5</div>
<div class="img">Image 6</div>
<div class="img">Image 7</div>
<div class="img">Image 8</div>
<div class="img">Image 9</div>
<div class="img">Image 10</div>
<div class="img">Image 11</div>
<div class="img">Image 12</div>
<div class="img">Image 13</div>
</div>
<div class="side">
<div class="banner">Banner1</div>
<div class="banner">Banner2</div>
<div class="banner">Banner3</div>
<div class="banner">Banner4</div>
<div class="banner">Banner5</div>
<div class="banner">Banner6</div>
<div class="banner">Banner7</div>
<div class="banner">Banner8</div>
<div class="banner">Banner9</div>
<div class="banner">Banner10</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
</body>

Edit:
Here's another method that's a bit more concise.
const main = document.querySelectorAll('.main .img');
const side = document.querySelectorAll('.side .banner');
let offset;
side.forEach((banner, idx) => {
const img = main[idx] || offset;
img.insertAdjacentElement('afterend', banner);
offset = banner;
});
.content { display: flex }
.main, .side { flex-grow: 1 }
.content,
.main2 {
font-family: sans-serif;
line-height: 2;
color: white;
}
.img { background-color: red; margin: 3px;}
.banner { background-color: blue; margin: 3px;}
<div class="body">
<h2>Rearrange content - Place each div (banner) under each image </h2>
<div class="content">
<div class="main">
<div class="img">Image 1</div>
<div class="img">Image 2</div>
<div class="img">Image 3</div>
<div class="img">Image 4</div>
<div class="img">Image 5</div>
<div class="img">Image 6</div>
</div>
<div class="side">
<div class="banner">Banner1</div>
<div class="banner">Banner2</div>
<div class="banner">Banner3</div>
<div class="banner">Banner4</div>
<div class="banner">Banner5</div>
<div class="banner">Banner6</div>
<div class="banner">Banner7</div>
<div class="banner">Banner8</div>
<div class="banner">Banner9</div>
<div class="banner">Banner10</div>
</div>
</div>
</div>
Original:
You need to loop over the elements and then merge/combine the arrays as you are looping. There are multiple ways this can be done. Here's one way (with comments) that uses reduce to combine the elements.
If you're starting out with JS, I would suggest using a simple for loop to start off.
When you run the code snippet below, the original will be in Red. Clicking the button will merge the elements, append them, and display them in Green.
Good luck!
// I've wrapped this in a function so I can call it.
function rearrange() {
// First I'm going to query all the divs with 'img' class
// From that, I'll call 'Array.from' to create an array.
const images = Array.from(document.querySelectorAll('.img'));
// Similar to above, but for all the 'banner' divs.
const banners = Array.from(document.querySelectorAll('.banner'));
// This is my loop. I'm using .reduce, but for/while/.forEach/etc
// would all have worked.
// I'm going to loop over the images and push image/banner into
// a new container
const container = images.reduce(function (el, image) {
// get the first "banner" div
const banner = banners.shift();
// append the image div, first
el.appendChild(image);
// if a banner exists, append that
if (banner) {
el.appendChild(banner);
}
// as this is a reducer, i return my accumulator of divs
return el;
}, document.createElement('div'));
// As image/banner could differ in length, push any additional
// banner divs to the container
if (banners.length > 0) {
banners.forEach(banner => container.appendChild(banner));
}
// Add the new class name
container.classList.add('main2');
// Finally, append to body
document.querySelector('.body').appendChild(container);
}
// My event handler to run
document.querySelector('#rearrange').addEventListener('click', rearrange);
.content { display: flex }
.main, .side { flex-grow: 1 }
.content,
.main2 {
font-family: sans-serif;
line-height: 2;
color: white;
}
.img { background-color: red; margin: 3px;}
.banner { background-color: blue; margin: 3px;}
<div class="body">
<button id="rearrange">Click here to re-arrange</button>
<h2>Rearrange content - Place each div (banner) under each image </h2>
<div class="content">
<div class="main">
<div class="img">Image 1</div>
<div class="img">Image 2</div>
<div class="img">Image 3</div>
<div class="img">Image 4</div>
<div class="img">Image 5</div>
<div class="img">Image 6</div>
</div>
<div class="side">
<div class="banner">Banner1</div>
<div class="banner">Banner2</div>
<div class="banner">Banner3</div>
<div class="banner">Banner4</div>
<div class="banner">Banner5</div>
<div class="banner">Banner6</div>
<div class="banner">Banner7</div>
<div class="banner">Banner8</div>
<div class="banner">Banner9</div>
<div class="banner">Banner10</div>
</div>
</div>
<h2>Rearranged:</h2>
<hr />
</div>

Not in Order when using Masonry Layout using css grid

I'm trying to create layout of 2 columns using masonry layout in grid system. Each Item may have multiple links and descriptions. So that I tried using masonry layout avoid gap in rows.
But the item are not in order (Left to Right). In the below pic first item as multiple links to its occupied two rows. So that 3rd item wrap to 2nd column.
How can i avoid that 3rd item shouldn't wrap to 2nd column. It's should be in left to right or Odd items on left and even on right.
How can anyone help me with this please.
let productList={
resizeAllGridItems: function(){
allItems = document.getElementsByClassName("item");
for(x=0;x<allItems.length;x++){
resizeGridItem(allItems[x]);
}
}
}
$(document).ready(function () {
productList.resizeAllGridItems();
$( window ).resize(function() {
productList.resizeAllGridItems
});
});
function resizeGridItem(item){
grid = document.getElementsByClassName("grid")[0];
rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
console.log(rowHeight,rowGap,(item.querySelector('.content').getBoundingClientRect().height+rowGap))
rowSpan = Math.ceil((item.querySelector('.content').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
item.style.gridRowEnd = "span "+rowSpan;
}
function resizeInstance(instance){
item = instance.elements[0];
resizeGridItem(item);
}
.container{
max-width:640px;
}
.grid {
display: grid;
grid-gap: 50px 40px;
grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
grid-auto-rows: 40px;
}
body {
margin: 10px;
color: #374046;
background-color: #fff;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 1.15em;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.item {
background-color: #ffffff;
border: 2px solid black;
}
.product-link{
font-size: larger;
}
.desc{
padding-right:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="grid">
<div class="item">
<div class="content">
<div class="title">
<p>Index-Lined Annuity -1</p>
</div>
<div>
<div>
<a class="product-link" href="#">Flex Item -></a>
<div class="desc">
<p>Flex Item Description</p>
</div>
</div>
<div>
<a class="product-link" href="#">Flex Item -></a>
<div class="desc">
<p>Flex Item Description</p>
</div>
</div>
<div>
<a class="product-link" href="#">Flex Item -></a>
<div class="desc">
<p>Flex Item Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="title">
<p>Single Premium Income Annuity -2 </p>
</div>
<div>
<div>
<a class="product-link" href="#">Flex Item -></a>
<div class="desc">
<p>Flex Item Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="title">
<p>Variable Annuity -3</p>
</div>
<div>
<div>
<a class="product-link" href="#">Flex Item -></a>
<div class="desc">
<p>Flex Item Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="title">
<p>Fixed Rate Annuity -4</p>
</div>
<div>
<a class="product-link" href="#">Flex Item -></a>
<div class="desc">
<p>Flex Item Description</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="title">
<p>Deffered Annuity -5</p>
</div>
<div>
<div>
<a class="product-link" href="#">Flex Item -></a>
<div class="desc">
<p>Flex Item Description</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
enter image description here

Prevent insertBefore duplicating content

I want to move the entire content of the .main-section-image before the .main-section .content .title. But when I use my jQuery code, the content of all other divs is duplicated.
How I can use an if condition to prevent duplicated text from adding to the area?
$('.main-section-image').insertBefore('.main-section .content .title');
.duo-left {float: left;}
.duo-right {float: right;}
.main-section {width: 100%; float: left;}
.main-section .content {
width: 65%;
}
.main-section .main-section-image {
width: 35%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-section">
<div class="content duo duo-right">
<div class="title">
<p><span class="red">TITLE</span> </p>
</div>
<div class="description">
<p>Section description</p>
</div>
</div>
<div class="main-section-image duo-left">
<img src="https://via.placeholder.com/200x200.png">
</div>
<div class="clearfix"> </div>
</div>
<div class="main-section">
<div class="content duo duo-left">
<div class="title">
<p><span class="red">TITLE</span> </p>
</div>
<div class="description">
<p>Section description</p>
</div>
</div>
<div class="main-section-image duo-right">
<img src="https://via.placeholder.com/200x200.png">
</div>
<div class="clearfix"> </div>
</div>

You're inserting all .main-section-image elements before all .content .title elements.
Since you have multiple .main-section elements that each contain their own images and titles, multiple images are inserted before all the titles.
I suggest using jQuery's each() to make the change within each .main-section separately.
Below, I'm using jQuery's selector context, which uses find().
I also add a button and click handler to perform the insert.
But that's just for demonstration, so feel free to remove that code.
$('#go').on('click', function() {
$('.main-section').each(function() {
var $image = $('.main-section-image', this);
var $target = $('.content .title', this);
$image.insertBefore($target);
});
});
.duo-left {
float: left;
}
.duo-right {
float: right;
}
.main-section {
width: 100%;
float: left;
}
.main-section .content {
width: 65%;
}
.main-section .main-section-image {
width: 35%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="go">Make The Change</button>
<hr>
<div class="main-section">
<div class="content duo duo-right">
<div class="title">
<p><span class="red">TITLE</span> </p>
</div>
<div class="description">
<p>Section description</p>
</div>
</div>
<div class="main-section-image duo-left">
<img src="https://via.placeholder.com/100x50.png">
</div>
<div class="clearfix"> </div>
</div>
<div class="main-section">
<div class="content duo duo-left">
<div class="title">
<p><span class="red">TITLE</span> </p>
</div>
<div class="description">
<p>Section description</p>
</div>
</div>
<div class="main-section-image duo-right">
<img src="https://via.placeholder.com/100x50.png">
</div>
<div class="clearfix"> </div>
</div>
Edit
You asked about how to add a class after the change. You can use jQuery's addClass().
Since insertBefore returns a jQuery object, you can chain addClass afterwards, like this:
$image.insertBefore($target).addClass('another-class');
Here's a demonstration:
$('#go').on('click', function() {
$('.main-section').each(function() {
var $image = $('.main-section-image', this);
var $target = $('.content .title', this);
$image.insertBefore($target).addClass('another-class');
});
});
.duo-left {
float: left;
}
.duo-right {
float: right;
}
.main-section {
width: 100%;
float: left;
}
.main-section .content {
width: 65%;
}
.main-section .main-section-image {
width: 35%;
}
.another-class {
outline: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="go">Make The Change</button>
<hr>
<div class="main-section">
<div class="content duo duo-right">
<div class="title">
<p><span class="red">TITLE</span> </p>
</div>
<div class="description">
<p>Section description</p>
</div>
</div>
<div class="main-section-image duo-left">
<img src="https://via.placeholder.com/100x50.png">
</div>
<div class="clearfix"> </div>
</div>
<div class="main-section">
<div class="content duo duo-left">
<div class="title">
<p><span class="red">TITLE</span> </p>
</div>
<div class="description">
<p>Section description</p>
</div>
</div>
<div class="main-section-image duo-right">
<img src="https://via.placeholder.com/100x50.png">
</div>
<div class="clearfix"> </div>
</div>

How do I have this code adjusted using js, html and css to have a default collapsed view?

Here is the full code and it has js, css and html. I got this from an online snippet and I am not good with Javascript. Please help!!!
I have this posed on my home page and taking up the space, would be great to have it all collapsed.
$(document).on('click', '.panel-heading span.clickable', function(e) {
var $this = $(this);
if (!$this.hasClass('panel-collapsed')) {
$this.closest('.panel').find('.panel-body').slideUp();
$this.addClass('panel-collapsed');
$this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
} else {
$this.closest('.panel').find('.panel-body').slideDown();
$this.removeClass('panel-collapsed');
$this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
}
})
.row {
margin-top: 40px;
padding: 0 10px;
}
.clickable {
cursor: pointer;
}
.panel-heading span {
margin-top: -20px;
font-size: 15px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel 1</h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">Panel content</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel 2</h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">Panel content</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel 3</h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">Panel content</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Panel 4</h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">Panel content</div>
</div>
</div>
</div>
</div>

Add this in your css: .closeThisPanel{ display:none; }
Add the closeThisPanel class to the panel-body div.
Add the panel-collapsed class the the clickable span.
Change the icon from glyphicon glyphicon-chevron-up to glyphicon glyphicon-chevron-down
$(document).on('click', '.panel-heading span.clickable', function(e) {
var $this = $(this);
if (!$this.hasClass('panel-collapsed')) {
$this.closest('.panel').find('.panel-body').slideUp();
$this.addClass('panel-collapsed');
$this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
} else {
$this.closest('.panel').find('.panel-body').slideDown();
$this.removeClass('panel-collapsed');
$this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
}
})
.row {
margin-top: 40px;
padding: 0 10px;
}
.clickable {
cursor: pointer;
}
.panel-heading span {
margin-top: -20px;
font-size: 15px;
}
.closeThisPanel{
display:none;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel 2</h3>
<span class="pull-right clickable panel-collapsed"><i class="glyphicon glyphicon-chevron-down"></i></span>
</div>
<div class="panel-body closeThisPanel">Panel content</div>
</div>
</div>
</div>
</div>

jQuery remove & add class on click

So I have this jQuery which allows me to click on a element and it will extended something that is hidden. But you can click on multiple elements and they will all be extended. I only want one to be extended at any one point... Could someone help me out?
if( $(window).width() >= 991 ) {
$('.brands-supply .single').click(function() {
$id = $(this).attr('href');
$($id).stop().slideDown('fast');
}, function() {
$($id).stop().slideUp('fast');
});
}
HTML
<div class="brands-supply hidden-sm hidden-xs">
<h2> Our Consultancy Services </h2>
<div class="container">
<div class="row">
<a class="col-md-3 single collapsed" data-toggle="collapse" href="#collapseExample0" style="background: #464648;" aria-expanded="false">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/cookies.png">
</a>
<a class="col-md-3 single collapsed" data-toggle="collapse" href="#collapseExample1" style="background: #5e5e5e;" aria-expanded="false">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/Brian.jpg">
</a>
<a class="col-md-3 single" data-toggle="collapse" href="#collapseExample2" style="background: #9a9a9a;">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/11/Executive_proection_services.jpg">
</a>
<a class="col-md-3 single" data-toggle="collapse" href="#collapseExample3" style="background: #cccccc;">
<img src="">
</a>
</div>
<div class="row">
<div class="col-md-12 collapse" id="collapseExample0" style="height: 0px; background: rgb(70, 70, 72);" aria-expanded="false">
<div class="text">
<div class="row">
<div class="col-md-4">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png">
</div>
<div class="col-md-7">
<p>Reviews</p>
<p> </p>
<p>This si a p tag</p>
</div>
</div>
</div>
</div>
<div class="col-md-12 collapse" id="collapseExample1" style="height: 0px; background: rgb(94, 94, 94);" aria-expanded="false">
<div class="text">
<div class="row">
<div class="col-md-4">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png">
</div>
<div class="col-md-7">
<p>Testing</p>
<p> </p>
<p>This is a ap tag</p>
</div>
</div>
</div>
</div>
<div class="col-md-12 collapse" id="collapseExample2" style="background: #9a9a9a;">
<div class="text">
<div class="row">
<div class="col-md-4">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png">
</div>
<div class="col-md-7">
<p>Projects</p>
<p> </p>
<p>This is a p tag</p>
</div>
</div>
</div>
</div>
<div class="col-md-12 collapse" id="collapseExample3" style="background: #cccccc;">
<div class="text">
<div class="row">
<div class="col-md-4">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png">
</div>
<div class="col-md-7">
<p>Services</p>
<p> </p>
<p>This is a Ptag</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Any help appreciated!

First click doesn't take two functions as parameters. You should use slideToggle.
if( $(window).width() >= 991 ) {
$('.brands-supply .single').click(
function() {
var id = $(this).attr('href');
$('.brands-supply .single').each(
function () {
var href = $(this).attr('href');
if (href == id) return;
$(href).slideUp('fast');
}
);
$(id).stop().slideToggle('fast');
}
);
}
So on click select all the elements you attached the click to and iterate over them sliding them up if they are not the current clicked href. Then just use slideToggle on the clicked one and it will slide it up or down based on how its currently displayed.
Fiddle: http://jsfiddle.net/AtheistP3ace/xkv31rop/
JS:
same as above
CSS:
div > div {
height: 100px;
width: 100%;
display: none;
}
#id1 {
background: red;
}
#id2 {
background: blue;
}
#id3 {
background: orange;
}
HTML:
<div class="brands-supply">
<a class="single" href="#id1">id1</a>
<a class="single" href="#id2">id2</a>
<a class="single" href="#id3">id3</a>
<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>
</div>