We Keep Coding

How to Filter for data-rel Value on Load with jQuery

The filter on my website needs to have a default value on load.
My main JS script uses this, in case it's useful for the solution:
window.addEventListener('DOMContentLoaded', event => { //code to be loaded }
The filter has no default, but I want to set it to one of the data-rel values by default so that the page loads with the content already filtered with my defined default.
I looked around for a while at other similar problems but couldn't find a solution to my exact problem.
In a separate filter JS file, I'm using this code as a base:
JS:
$(function(){
var selectedClass = "$('*[data-rel="web"]');";
$(".filter").click(function(){
selectedClass = $(this).attr("data-rel");
$(".work").fadeTo(100, 0.1);
$(".portfolio-item").not("."+selectedClass).fadeOut().removeClass('scale');
setTimeout(function(){
$("."+selectedClass).fadeIn().addClass('scale').sort();
$(".work").fadeTo(300, 1);
}, 300);
});
});
HTML:
<section class="no-padding" id="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Portfolio</h2>
<h3 class="section-subheading text-muted">A showcase of my work.</h3>
<div class="tabs">
<button class="btn filter" id="filt" href="" data-rel="all">ALL</button>
<button class="btn filter" id="filt" data-rel="web">Web Design</button>
<button class="btn filter" id="filt" data-rel="graphics">Graphic Design</button>
<button class="btn filter" id="filt" data-rel="branding">Branding</button>
<button class="btn filter" id="filt" data-rel="photography">Photography</button>
<button class="btn filter" id="filt" data-rel="motion">Motion Graphics</button>
</div>
<br>
</div>
<div class="work">
<!--div class="row"-->
<div class="col-md-4 portfolio-item web scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 1
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item graphics scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 2
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item branding scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 3
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<!--/div-->
<!-- /.row -->
<!-- Projects Row -->
<!--div class="row"-->
<div class="col-md-4 portfolio-item motion scale tile all">
<a href="img/portfolio/fullsize/1.jpg">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 4
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item motion scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 5
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item motion scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 6
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<!--/div-->
<!-- Projects Row -->
<!--div class="row"-->
<div class="col-md-4 portfolio-item photography scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 7
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item graphics scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 8
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item web scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 9
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
<!--/div--> <!--WORK-->
<!-- /.row -->
<hr>
</div>
</div>
</section>
For this example, I would set "web" as the default (of course, "all" isn't the default, but appears that way as the code just shows all items on the page before a filter is clicked anyway).
I tried making selectedClass = $(.filter).attr("data-rel", "web"); or simply selectedClass = "web";, and various other variants such as $(.filter).attr({"data-rel": "web"}); but none of that works. I believe I'm missing something in regards to how the click function is interacting with the data-rel selection.
I also tried adding this after the initial declaration of selectedClass:
$(".portfolio-item").not("." + "selectedClass").removeClass('scale');
setTimeout(function () {
$("." + selectedClass).addClass('scale').sort();
$(".work");
}, 1)
The idea being to copy what is done when a button is clicked but get rid of the fading and make it as instantaneous as possible. I also tried wrapping that part in $(document).ready(function(){}.
But none of that did anything.
I'd appreciate it if someone could please explain to me what I'm doing wrong so that the default filter is "web" when the page loads.

Jquery can't close div on click again

I am trying to close a div by clicking a button with SlideUp function.
But when I click on button it opens as expected and closes other divs. But doesn't close it re-opens itself.
Here is my html code
<div class="row all-row">
<div class="col-lg-4">
<div class="main-acc">
<div class="brand-wrapper">
<img src="img.png" alt="">
<h5 class="p-3">Lorem</h5>
<div class="card-wrapper">
<div class="card border-0 text-center">
<h5>Ipsunlore</h5>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius unde est ut consequatur error amet eligendi vero aut assumenda.
</p>
Find
</div>
</div>
<a class="btn d-flex justify-content-between align-items-center opener" href="#">
<h5 class="m-0">Lorem</h5>
<i class="fa fa-chevron-up pl-3"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="main-acc">
<div class="brand-wrapper">
<img src="image.jpg" alt="">
<h5 class="p-3">Lorem</h5>
<div class="card-wrapper">
<div class="card border-0 text-center">
<h5>Mister: Ipsun</h5>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius unde est ut consequatur error amet eligendi vero aut assumenda.
</p>
From
</div>
</div>
<a class="btn d-flex justify-content-between align-items-center opener" href="#">
<h5 class="m-0">Lorem</h5>
<i class="fa fa-chevron-up pl-3"></i>
</a>
</div>
</div>
</div>
</div>
and here is the Jquery codes:
<script>
$(".opener").click(function(){
$(".all-row").find(".card-wrapper").slideUp();
$(this).closest(".card-wrapper").slideToggle();
})
</script>

You use .closest(), which finds the closest matching parent. But what you need is .prev() because the element you want to target is the previous sibling... Not it's parent.
Additionnaly, you should remove this targeted element form the "all" .card-wrapper collection, using .not()
$(".opener").click(function() {
// The card previous to the clicked .card-opener anchor
var this_card = $(this).prev(".card-wrapper")
// Make sure all cards closes EXCEPT this one
$(".all-row").find(".card-wrapper").not(this_card).slideUp();
// Toggle this one
this_card.slideToggle();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="row all-row">
<div class="col-lg-4">
<div class="main-acc">
<div class="brand-wrapper">
<img src="img.png" alt="">
<h5 class="p-3">Lorem</h5>
<div class="card-wrapper">
<div class="card border-0 text-center">
<h5>Ipsunlore</h5>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius unde est ut consequatur error amet eligendi vero aut assumenda.
</p>
Find
</div>
</div>
<a class="btn d-flex justify-content-between align-items-center opener" href="#">
<h5 class="m-0">Lorem</h5>
<i class="fa fa-chevron-up pl-3"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="main-acc">
<div class="brand-wrapper">
<img src="image.jpg" alt="">
<h5 class="p-3">Lorem</h5>
<div class="card-wrapper">
<div class="card border-0 text-center">
<h5>Mister: Ipsun</h5>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius unde est ut consequatur error amet eligendi vero aut assumenda.
</p>
From
</div>
</div>
<a class="btn d-flex justify-content-between align-items-center opener" href="#">
<h5 class="m-0">Lorem</h5>
<i class="fa fa-chevron-up pl-3"></i>
</a>
</div>
</div>
</div>
</div>

Browser back button is not perform right

I am using Rails and did a navbar. The navbar folds into a burger after the certain width has been reached. I am able to click on the burger-sign without defining any event listener in JS. I just added this into the head of my application.html.erb
<meta>
<%= javascript_include_tag 'application' %>
<%= yield :js %>
<meta>
After adding, the click worked perfectly, but my home link, root_path was broken. It constantly lead to the #index page, but would display only "2019"on the blank page, not the actual #index page layout. I fixed the links adding the get method ty my link, like this:
<li><%= link_to 'Home', root_path, method: :get %></li>
What still doensn't work, is my browser back button, this still leads to this weird blank page with the 2019 printed on it. Can someone explain what is happening and how do I get to the previous page by clicking on the browser back button? Thanks!
P.S. This is the sourse html
<!DOCTYPE html>
<html>
<head>
<title>Neigbornow</title>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="RST7jzlY6IftapnMzEI9BkObFqh4B8EaX4cnX7PavwQq7ziZ5PKkVtgnExe8oShZxl56m40/UBgYG0OacVrWbg==" />
<meta>
<script src="/assets/jquery3.self-e200ee796ef24add7054280d843a80de75392557bb4248241e870fac0914c0c1.js?body=1"></script>
<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script>
<script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1"></script>
<script src="/assets/bootstrap/affix.self-b2bd74404ab3c627c5129dcdd3bdc2fc0a9d4bff4e1b6f1bae96412f9a1e9723.js?body=1"></script>
<script src="/assets/bootstrap/alert.self-7c7aa23778284da0e4aa395a0a6d858c7efd891c9312fe71908b28292654ac0c.js?body=1"></script>
<script src="/assets/bootstrap/button.self-b7a8ce9f47662b97ab74ef3dd416e93d3a4f644b252307a28231976a0149feef.js?body=1"></script>
<script src="/assets/bootstrap/carousel.self-c2c0ad2347d3fdd8447abd9d5792efed40ad5afadc5e0de3001e34904a6f68ce.js?body=1"></script>
<script src="/assets/bootstrap/collapse.self-4db094cc14a1aafa93e51e6f298115323037bb9e24c060dd0de52f27446f6227.js?body=1"></script>
<script src="/assets/bootstrap/dropdown.self-7efa4aa654357ae664a98ec52151c25cd4927eacd1fabe038d068d9344b62cbd.js?body=1"></script>
<script src="/assets/bootstrap/modal.self-4ca048907279f4bb9187ba2541ae5d03296917d5c42e8fef0b58ec31c8902f0f.js?body=1"></script>
<script src="/assets/bootstrap/scrollspy.self-e62629e47ba5fe8b7faaa745f2fef2ccdb1bfd56ffb4f95615684ef40c74bcc4.js?body=1"></script>
<script src="/assets/bootstrap/tab.self-7fbfa844201ceeb4b896e4d185a33df19a284fe461281b7c0f78dbea2ef6da5a.js?body=1"></script>
<script src="/assets/bootstrap/transition.self-3c74f1999fcbf39cfb240b67c9a9e900863859f82f53fb27e5a388fe5e1a1c5c.js?body=1"></script>
<script src="/assets/bootstrap/tooltip.self-82858d5843f55bfed321ea59fc5b180f3d2a8afc498ebc4d665561110b807875.js?body=1"></script>
<script src="/assets/bootstrap/popover.self-a1e6d4555fb912f0405099135eaddbe8273ba8f08323477a471d34419d57b446.js?body=1"></script>
<script src="/assets/bootstrap-sprockets.self-fbfa5ad7d9aa0afe439ec4ff3883acc4cb92b62cb67c40d674320c9aa1d4642d.js?body=1"></script>
<script src="/assets/activestorage.self-1ed4604ac2170045f1ffca4edb81a75246661555e4f9cf682bb8a21825e32e1c.js?body=1"></script>
<script src="/assets/turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1"></script>
<script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1"></script>
<script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1"></script>
<script src="/assets/home.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/profile.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/reviews.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/user_steps.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/users.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/application.self-813dac1f9eb54ab17313987648014af35d74ebeb15c2265509c52491183d3dcc.js?body=1"></script>
<meta>
<link rel="stylesheet" media="all" href="/assets/style.self-67cdb30c3f83239515cab5c4f35c9f7533c426bd77b8d75c40e8ff613eb658ec.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-fe639f1da8d2570340060e10dc6bf2430bb27ff5e40357dce724cbc8efb24584.css?body=1" data-turbolinks-track="reload" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand pull-left" href="#">
<img src="/assets/logo_transparent-ad9441c50046e461177bad078050d5345754d0413d7ef8a7f549aa5bf35e466e.png" width="147" height="70" class="d-inline-block align-left mr-2">
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li><a data-method="get" href="/">Home</a></li>
<li><a>About</a></li>
<li><a>Search</a></li>
<li><a>Contact</a>
<li>
<div class="log-in-btn"><button class="btn" type="submit">Log in</button></div>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
</div>
<head>
<title>Neignbornow</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div class="empty-space"> </div>
<div class="site-blocks-cover overlay" style="background-image: url(https://images.unsplash.com/photo-1464082354059-27db6ce50048?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80);" data-aos="fade" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row align-items-center justify-content-end text-center">
<div class="row justify-content-center mb-4">
<div class="col-md-8 text-left">
<div class="site-intro">
<h1>Home is about personal connections, not just neighbors.</h1>
<p>Recconect with your neighbors, by sharing things and experiences. Now.</p>
<button class="btn register" type="submit">Register</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Header -->
<!-- About section -->
<div class="site-section bg-light">
<div class="container">
<div class="col-12">
<h2>About Neighborheart</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut
metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.
</p>
</div>
</div>
</div>
<!-- About section -->
<!-- Testimonials -->
<div class="site-section bg-white">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-md-7 text-center border-primary">
<h2 class="font-weight-light text-primary">Testimonials</h2>
</div>
</div>
<div class="slide-one-item home-slider owl-carousel">
<div>
<div class="testimonial">
<figure class="mb-4">
<img src="images/person_3.jpg" alt="Image" class="img-fluid mb-3">
<p>John Smith</p>
</figure>
<blockquote>
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur unde reprehenderit aperiam quaerat fugiat repudiandae explicabo animi minima fuga beatae illum eligendi incidunt consequatur. Amet dolores excepturi earum unde
iusto.”</p>
</blockquote>
</div>
</div>
<div>
<div class="testimonial">
<figure class="mb-4">
<img src="images/person_2.jpg" alt="Image" class="img-fluid mb-3">
<p>Christine Aguilar</p>
</figure>
<blockquote>
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur unde reprehenderit aperiam quaerat fugiat repudiandae explicabo animi minima fuga beatae illum eligendi incidunt consequatur. Amet dolores excepturi earum unde
iusto.”</p>
</blockquote>
</div>
</div>
<div>
<div class="testimonial">
<figure class="mb-4">
<img src="images/person_4.jpg" alt="Image" class="img-fluid mb-3">
<p>Robert Spears</p>
</figure>
<blockquote>
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur unde reprehenderit aperiam quaerat fugiat repudiandae explicabo animi minima fuga beatae illum eligendi incidunt consequatur. Amet dolores excepturi earum unde
iusto.”</p>
</blockquote>
</div>
</div>
<div>
<div class="testimonial">
<figure class="mb-4">
<img src="images/person_5.jpg" alt="Image" class="img-fluid mb-3">
<p>Bruce Rogers</p>
</figure>
<blockquote>
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur unde reprehenderit aperiam quaerat fugiat repudiandae explicabo animi minima fuga beatae illum eligendi incidunt consequatur. Amet dolores excepturi earum unde
iusto.”</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<!-- Testimonials -->
<!-- Search section and show map -->
<div class="site-section bg-light">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="h5 mb-4 text-black">Search for items in your neighborhood</h2>
<!-- Serach bar -->
<div class="form-search-wrap mb-3" data-aos="fade-up" data-aos-delay="200">
<form method="post">
<div class="row align-items-center">
<div class="col-lg-12 mb-4 mb-xl-0 col-xl-4">
<input type="text" class="form-control rounded" placeholder="What are you looking for?">
</div>
<div class="col-lg-12 mb-4 mb-xl-0 col-xl-3">
<div class="wrap-icon">
<span class="icon icon-room"></span>
<input type="text" class="form-control rounded" placeholder="Location">
</div>
</div>
<div class="col-lg-12 mb-4 mb-xl-0 col-xl-3">
<div class="select-wrap">
<span class="icon"><span class="icon-keyboard_arrow_down"></span></span>
<select class="form-control rounded" name="" id="">
<option value="">All Categories</option>
<option value="">Real Estate</option>
<option value="">Books & Magazines</option>
<option value="">Furniture</option>
<option value="">Electronics</option>
<option value="">Cars & Vehicles</option>
<option value="">Others</option>
</select>
</div>
</div>
<div class="col-lg-12 col-xl-2 ml-auto text-right">
<input type="submit" class="btn btn-primary btn-block rounded" value="Search">
</div>
</div>
</form>
</div>
<!-- Search bar -->
<!-- Map -->
<!-- Map -->
</div>
</div>
</div>
</div>
<!-- Search section Search section and show map -->
<!-- Cathegories -->
<div class="site-section" data-aos="fade">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-md-7 text-center border-primary">
<h2 class="font-weight-light text-primary">Popular Categories</h2>
<p class="color-black-opacity-5">Lorem Ipsum Dolor Sit Amet</p>
</div>
</div>
<div class="overlap-category mb-5">
<div class="row align-items-stretch no-gutters">
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-car"></span></span>
<span class="caption mb-2 d-block">Services</span>
<span class="number">1,921</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-closet"></span></span>
<span class="caption mb-2 d-block">Events</span>
<span class="number">2,339</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-home"></span></span>
<span class="caption mb-2 d-block">Household</span>
<span class="number">4,398</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-open-book"></span></span>
<span class="caption mb-2 d-block">Books & Magazines</span>
<span class="number">3,298</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-tv"></span></span>
<span class="caption mb-2 d-block">Electronics</span>
<span class="number">2,932</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-pizza"></span></span>
<span class="caption mb-2 d-block">Beverages</span>
<span class="number">183</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Cathegories -->
<div class="newsletter bg-primary py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<h2>Newsletter</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="col-md-6">
<form class="d-flex">
<input type="text" class="form-control" placeholder="Email">
<input type="submit" value="Subscribe" class="btn btn-white">
</form>
</div>
</div>
</div>
</div>
</body>
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-6">
<h2 class="footer-heading mb-4">About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident rerum unde possimus molestias dolorem fuga, illo quis fugiat!</p>
</div>
<div class="col-md-3">
<h2 class="footer-heading mb-4">Navigations</h2>
<ul class="list-unstyled">
<li>About Us</li>
<li>Services</li>
<li>Testimonials</li>
<li>Contact Us</li>
</ul>
</div>
<div class="col-md-3">
<h2 class="footer-heading mb-4">Follow Us</h2>
<span class="icon-facebook"></span>
<span class="icon-twitter"></span>
<span class="icon-instagram"></span>
<span class="icon-linkedin"></span>
</div>
</div>
</div>
<div class="col-md-3">
<form action="#" method="post">
<div class="input-group mb-3">
<input type="text" class="form-control border-secondary text-white bg-transparent" placeholder="Search products..." aria-label="Enter Email" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-primary text-white" type="button" id="button-addon2">Search</button>
</div>
</div>
</form>
</div>
</div>
<div class="row pt-5 mt-5 text-center">
<div class="col-md-12">
<div class="border-top pt-5">
<p>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©
<script>
document.write(new Date().getFullYear());
</script> All rights reserved | This template is made with <i class="icon-heart" aria-hidden="true"></i> by Colorlib
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>

loop through divs and move hrefs to another div

I am trying to loop through divs take the href from one div and move it to the href of another div, and then repeat this for all the following divs.
I have it working so far as it does it for the first div but then it places that href link in all the others.
see https://jsfiddle.net/grmaw27y/5/
html:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="image">
<a href="#" class="">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=230%C3%97230&w=230&h=230" />
</a>
</div>
</div>
<div class="col-md-8">
<h2>Google</h2>
<div class="entry">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet ipsum eget odio maximus posuere. Fusce dapibus id urna quis eleifend. Nam lacinia consequat lectus, at ultricies purus elementum non.</p>
<p>https://www.google.ie/</p>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="image">
<a href="">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=230%C3%97230&w=230&h=230" />
</a>
</div>
</div>
<div class="col-md-8">
<h2>Yahoo</h2>
<div class="entry">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>https://ie.yahoo.com/</p>
</div>
</div>
</div>
</div>
js:
$('.entry').each(function() {
var href = $('.entry p a').attr('href');
$('.image a').attr('href', href);
});

Try this:
$('.entry').each(function(i,element) {
var href = $(element).find('p a').attr('href');
$(element).parent().prev().find('.image a').attr('href', href);
});
Working example:
https://jsfiddle.net/grmaw27y/6/
So what was wrong with your code?
Your expression to find the href var href = $('.entry p a').attr('href'); and assign href $('.image a').attr('href', href);, were working on class selectors. which return array of all matches. In every pass they were matching the same two elements.
To fix this we use the element object in loop, you specify exactly what you want to read and write.

You need to use traversal functions to select elements relative to each target:
$('.entry').each(function() {
var href = $('p a', this).attr('href');
$(this).closest('.row').find('.image a').attr('href', href);
});
https://jsfiddle.net/gbc22h0f/

You can loop over the container and find the relevant elements INSIDE each of the containers:
$('.container').each(function() {
var href = $(this).find('div.entry a').attr('href');
$(this).find('div.image a').attr('href', href);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="image">
<a href="#" class="">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=230%C3%97230&w=230&h=230" />
</a>
</div>
</div>
<div class="col-md-8">
<h2>Google</h2>
<div class="entry">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet ipsum eget odio maximus posuere. Fusce dapibus id urna quis eleifend. Nam lacinia consequat lectus, at ultricies purus elementum non.</p>
<p>https://www.google.ie/</p>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="image">
<a href="">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=230%C3%97230&w=230&h=230" />
</a>
</div>
</div>
<div class="col-md-8">
<h2>Yahoo</h2>
<div class="entry">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>https://ie.yahoo.com/</p>
</div>
</div>
</div>
</div>

Slick slider jumps

I am using slick slider for a page.Everything works great except one thing: When I drag the slide sometimes the image or text bounces and that's look really bad. What can I do to avoid that problem?
Here is my code
<section class="portfolio" id="portfolio">
<div class="container" style="height:100px">
<div class="row">
<div class="col-lg-12"></div>
</div>
</div>
<div id="portfolio_slider">
<div id="item">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 text-right">
<div id="project_name">
PROJECT<br />
NAME
</div>
<div id="project-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tortor erat,
laoreet ut ullamcorper vel, fermentum vel ex. Donec convallis leo sit amet auctor
rutrum. Nullam accumsan risus at quam porttitor ec tortor erat, laoreet ut
ullamcorper vel, fermentum vel tristique.
</div>
<div id="read_more">Read More...</div>
</div>
<div class="col-lg-7 col-lg-offset-1" id="project_image">
<img class="img-responsive shadow" src="http://i.imgur.com/35Lun7R.jpg" />
</div>
<div class=" col-lg-1 col-md-1 social_buttons">
<div class="centered">
<div class="flex-item" style="padding-bottom: 50px;">
<i class="fa fa-facebook"></i>
</div>
<div class="flex-item" style="padding-bottom: 50px;">
<i class="fa fa-twitter"></i>
</div>
<div class="flex-item">
<i class="fa fa-instagram"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

in the code pen, in CSS, there is one class, #portfolio_slider #item with margin: top 20px remove it.