We Keep Coding

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>

Check and do something if all bootstrap accordions are open

I have a bootstrap accordion and also a "open all" , "close all" button which works fine but what I am trying to do is when the accordions are all opened manually and not by the open all, close all button have the button change to "close all". is there a way to check if all the accordions are open so I can add the button functionality? I know you can use shown.bs.collapse and hidden.bs.collapse to see if an accordion is open but how would you check if ALL are open?
<!-- panel -->
<div class="panel accordion-toggle" href="#panelOne" data-toggle="collapse">
<div class="panel-heading">
<div class="l-col-panel">
<div class="panel-title__wrapper">
<div class="accordion__text">
<!--panel title -->
<h3 class="title-3">Title</h3>
</div>
</div>
<div class="accordion-toggle__angle-icon">
<!-- angle icon -->
<i class="accordion__angle fa fa-angle-down"></i>
</div>
</div>
<!-- /.l-col-panel -->
</div>
<div id="panelOne" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptate!</p>
</div>
</div>
</div>
</div>
<!--end: panel -->
<!-- panel -->
<div class="panel accordion-toggle" href="#panelOne" data-toggle="collapse">
<div class="panel-heading">
<div class="l-col-panel">
<div class="panel-title__wrapper">
<div class="accordion__text">
<!--panel title -->
<h3 class="title-3">Title</h3>
</div>
</div>
<div class="accordion-toggle__angle-icon">
<!-- angle icon -->
<i class="accordion__angle fa fa-angle-down"></i>
</div>
</div>
<!-- /.l-col-panel -->
</div>
<div id="panelTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptate!</p>
</div>
</div>
</div>
</div>
<!--end: panel -->
<!-- panel -->
<div class="panel accordion-toggle" href="#panelOne" data-toggle="collapse">
<div class="panel-heading">
<div class="l-col-panel">
<div class="panel-title__wrapper">
<div class="accordion__text">
<!--panel title -->
<h3 class="title-3">Title</h3>
</div>
</div>
<div class="accordion-toggle__angle-icon">
<!-- angle icon -->
<i class="accordion__angle fa fa-angle-down"></i>
</div>
</div>
<!-- /.l-col-panel -->
</div>
<div id="panelThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptate!</p>
</div>
</div>
</div>
</div>
<!--end: panel -->
jQuery:
$('.panel-collapse').on('shown.bs.collapse', function () {
console.log('OPEN')
});
$('.panel-collapse').on('hidden.bs.collapse', function () {
console.log('CLOSED')
});

$('#panelOne').on('shown.bs.collapse', function () {
let itemsList = document.getElementsByClassName('panel-collapse');
let isOpen = [];
for (let item of itemsList) {
if (item.classList.contains('in')) {
isOpen.push(true)
} else {
isOpen.push(false)
}
}
let allOpen = !isOpen.includes(false)
console.log(allOpen)
})
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- panel -->
<div class="panel accordion-toggle" href="#panelOne" data-toggle="collapse">
<div class="panel-heading">
<div class="l-col-panel">
<div class="panel-title__wrapper">
<div class="accordion__text">
<!--panel title -->
<h3 class="title-3">Title</h3>
</div>
</div>
<div class="accordion-toggle__angle-icon">
<!-- angle icon -->
<i class="accordion__angle fa fa-angle-down"></i>
</div>
</div>
<!-- /.l-col-panel -->
</div>
<div id="panelOne" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptate!</p>
</div>
</div>
</div>
</div>
<!--end: panel -->
<!-- panel -->
<div class="panel accordion-toggle" href="#panelTwo" data-toggle="collapse">
<div class="panel-heading">
<div class="l-col-panel">
<div class="panel-title__wrapper">
<div class="accordion__text">
<!--panel title -->
<h3 class="title-3">Title</h3>
</div>
</div>
<div class="accordion-toggle__angle-icon">
<!-- angle icon -->
<i class="accordion__angle fa fa-angle-down"></i>
</div>
</div>
<!-- /.l-col-panel -->
</div>
<div id="panelTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptate!</p>
</div>
</div>
</div>
</div>
<!--end: panel -->
<!-- panel -->
<div class="panel accordion-toggle" href="#panelThree" data-toggle="collapse">
<div class="panel-heading">
<div class="l-col-panel">
<div class="panel-title__wrapper">
<div class="accordion__text">
<!--panel title -->
<h3 class="title-3">Title</h3>
</div>
</div>
<div class="accordion-toggle__angle-icon">
<!-- angle icon -->
<i class="accordion__angle fa fa-angle-down"></i>
</div>
</div>
<!-- /.l-col-panel -->
</div>
<div id="panelThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptate!</p>
</div>
</div>
</div>
</div>
<!--end: panel -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>
You can check if the class in is exist or not.

npm run serve hangs forever vue

I'm trying to port HTML template to .vue files. I know there's known problem with deeply nested DOM like in this question, but my vue.config.js already looks like that:
module.exports = {
chainWebpack: (config) => {
const vueRule = config.module.rule('vue');
vueRule.uses.clear();
const vueLoader = vueRule.use('vue-loader').loader('vue-loader');
vueLoader.options({
prettify: false,
});
},
};
npm run serve hangs on 22% forever and it looks like that:
> vue-cli-service serve
INFO Starting development server...
22% building 106/110 modules 4 active ...bout.vue?vue&type=template&id=039c5b43&
While NODE_ENV=production npm run serve runs just fine.
Here's my whole About.vue file which hangs on render:
<!DOCTYPE html>
<html lang="en">
<head>
<title>About us</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Destino project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles/bootstrap4/bootstrap.min.css">
<link href="plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="styles/about_styles.css">
<link rel="stylesheet" type="text/css" href="styles/about_responsive.css">
</head>
<body>
<div class="super_container">
<!-- Header -->
<header class="header">
<div class="container">
<div class="row">
<div class="col">
<div class="header_container d-flex flex-row align-items-center justify-content-start">
<!-- Logo -->
<div class="logo_container">
<div class="logo">
<div>destino</div>
<div>travel agency</div>
<div class="logo_image"><img src="images/logo.png" alt=""></div>
</div>
</div>
<!-- Main Navigation -->
<nav class="main_nav ml-auto">
<ul class="main_nav_list">
<li class="main_nav_item">Home</li>
<li class="main_nav_item active">About us</li>
<li class="main_nav_item">Offers</li>
<li class="main_nav_item">News</li>
<li class="main_nav_item">Contact</li>
</ul>
</nav>
<!-- Search -->
<div class="search">
<form action="#" class="search_form">
<input type="search" name="search_input" class="search_input ctrl_class" required="required" placeholder="Keyword">
<button type="submit" class="search_button ml-auto ctrl_class"><img src="images/search.png" alt=""></button>
</form>
</div>
<!-- Hamburger -->
<div class="hamburger ml-auto"><i class="fa fa-bars" aria-hidden="true"></i></div>
</div>
</div>
</div>
</div>
</header>
<!-- Menu -->
<div class="menu_container menu_mm">
<!-- Menu Close Button -->
<div class="menu_close_container">
<div class="menu_close"></div>
</div>
<!-- Menu Items -->
<div class="menu_inner menu_mm">
<div class="menu menu_mm">
<div class="menu_search_form_container">
<form action="#" id="menu_search_form">
<input type="search" class="menu_search_input menu_mm">
<button id="menu_search_submit" class="menu_search_submit" type="submit"><img src="images/search_2.png" alt=""></button>
</form>
</div>
<ul class="menu_list menu_mm">
<li class="menu_item menu_mm">Home</li>
<li class="menu_item menu_mm">About us</li>
<li class="menu_item menu_mm">Offers</li>
<li class="menu_item menu_mm">News</li>
<li class="menu_item menu_mm">Contact</li>
</ul>
<!-- Menu Social -->
<div class="menu_social_container menu_mm">
<ul class="menu_social menu_mm">
<li class="menu_social_item menu_mm"><i class="fa fa-pinterest" aria-hidden="true"></i></li>
<li class="menu_social_item menu_mm"><i class="fa fa-linkedin" aria-hidden="true"></i></li>
<li class="menu_social_item menu_mm"><i class="fa fa-instagram" aria-hidden="true"></i></li>
<li class="menu_social_item menu_mm"><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li class="menu_social_item menu_mm"><i class="fa fa-twitter" aria-hidden="true"></i></li>
</ul>
</div>
<div class="menu_copyright menu_mm">Colorlib All rights reserved</div>
</div>
</div>
</div>
<!-- Home -->
<div class="home">
<!-- Image by https://unsplash.com/#peecho -->
<div class="home_background parallax-window" data-parallax="scroll" data-image-src="images/about_background.jpg" data-speed="0.8"></div>
<div class="container">
<div class="row">
<div class="col">
<div class="home_content">
<div class="home_content_inner">
<div class="home_title">About us</div>
<div class="home_breadcrumbs">
<ul class="home_breadcrumbs_list">
<li class="home_breadcrumb">Home</li>
<li class="home_breadcrumb">About us</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Find Form -->
<div class="find">
<!-- Image by https://unsplash.com/#garciasaldana_ -->
<div class="find_background_container prlx_parent">
<div class="find_background prlx" style="background-image:url(images/find.jpg)"></div>
</div>
<!-- <div class="find_background parallax-window" data-parallax="scroll" data-image-src="images/find.jpg" data-speed="0.8"></div> -->
<div class="container">
<div class="row">
<div class="col-12">
<div class="find_title text-center">Find the Adventure of a lifetime</div>
</div>
<div class="col-12">
<div class="find_form_container">
<form action="#" id="find_form" class="find_form d-flex flex-md-row flex-column align-items-md-center align-items-start justify-content-md-between justify-content-start flex-wrap">
<div class="find_item">
<div>Destination:</div>
<input type="text" class="destination find_input" required="required" placeholder="Keyword here">
</div>
<div class="find_item">
<div>Adventure type:</div>
<select name="adventure" id="adventure" class="dropdown_item_select find_input">
<option>Categories</option>
<option>Categories</option>
<option>Categories</option>
</select>
</div>
<div class="find_item">
<div>Min price</div>
<select name="min_price" id="min_price" class="dropdown_item_select find_input">
<option> </option>
<option>Price</option>
<option>Price</option>
</select>
</div>
<div class="find_item">
<div>Max price</div>
<select name="max_price" id="max_price" class="dropdown_item_select find_input">
<option> </option>
<option>Price</option>
<option>Price</option>
</select>
</div>
<button class="button find_button">Find</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- About -->
<div class="about">
<div class="container">
<div class="row">
<div class="col">
<div class="section_title text-center">
<h2>We are an award winning Agency</h2>
<div>take a look at our story</div>
</div>
</div>
</div>
<div class="row about_row">
<div class="col-lg-6 about_col order-lg-1 order-2">
<div class="about_content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fringilla lectus nec diam auctor, ut fringilla diam sagittis. Quisque vel est id justo faucibus dapibus id a nibh. Aenean suscipit consequat lacus, sit amet mollis nulla. Morbi sagittis orci id lacus convallis tempus eget sit amet metus. Sed finibus, magna at euismod aliquet, enim justo vulputate lorem, sit amet elementum dolor eros sollicitudin dui. Sed ac magna mauris. Nullam lectus odio, viverra vel mi id, interdum imperdiet nulla. </p>
<div class="button about_button">Read More</div>
</div>
</div>
<div class="col-lg-6 about_col order-lg-2 order-1">
<div class="about_image">
<img src="images/about.jpg" alt="https://unsplash.com/#sanfrancisco">
</div>
</div>
</div>
</div>
</div>
<!-- Milestones -->
<div class="milestones">
<div class="milestones_background parallax-window" data-parallax="scroll" data-image-src="images/fact_background.jpg" data-speed="0.8"></div>
<div class="container">
<div class="row">
<div class="col">
<div class="section_title text-center">
<h2>Fun facts about our Agency</h2>
<div>take a look</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 offset-lg-2">
<div class="milestones_text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fringilla lectus nec diam auctor, ut fringilla diam sagittis. Quisque vel est id justo faucibus dapibus id a nibh</p>
</div>
</div>
</div>
<div class="row milestones_container">
<!-- Milestone -->
<div class="col-lg-3 milestone_col">
<div class="milestone text-center">
<div class="milestone_icon"><img src="images/milestone_1.svg" alt=""></div>
<div class="milestone_counter" data-end-value="17">0</div>
<div class="milestone_text">Mountains Climbed</div>
</div>
</div>
<!-- Milestone -->
<div class="col-lg-3 milestone_col">
<div class="milestone text-center">
<div class="milestone_icon"><img src="images/milestone_2.svg" alt=""></div>
<div class="milestone_counter" data-end-value="213">0</div>
<div class="milestone_text">Islands Visited</div>
</div>
</div>
<!-- Milestone -->
<div class="col-lg-3 milestone_col">
<div class="milestone text-center">
<div class="milestone_icon"><img src="images/milestone_3.svg" alt=""></div>
<div class="milestone_counter" data-end-value="11923">0</div>
<div class="milestone_text">Photos Taken</div>
</div>
</div>
<!-- Milestone -->
<div class="col-lg-3 milestone_col">
<div class="milestone text-center">
<div class="milestone_icon"><img src="images/milestone_4.svg" alt=""></div>
<div class="milestone_counter" data-end-value="15">0</div>
<div class="milestone_text">Cruises Organized</div>
</div>
</div>
</div>
</div>
</div>
<!-- Services -->
<div class="services">
<div class="container">
<div class="row">
<div class="col">
<div class="section_title text-center">
<h2>Popular services that we offer</h2>
<div>take a look at these offers</div>
</div>
</div>
</div>
<div class="row icon_box_container">
<!-- Icon Box -->
<div class="col-lg-4 icon_box_col">
<div class="icon_box">
<div class="icon_box_image"><img src="images/service_1.svg" class="svg" alt="https://www.flaticon.com/authors/monkik"></div>
<div class="icon_box_title">Weekend trips</div>
<p class="icon_box_text">Lorem ipsum dolor sit amet, consectetur adip iscing elit. Fusce fringilla lectus nec diam auctor, ut fringilla diam sagittis.</p>
Read More
</div>
</div>
<!-- Icon Box -->
<div class="col-lg-4 icon_box_col">
<div class="icon_box">
<div class="icon_box_image"><img src="images/service_2.svg" class="svg" alt="https://www.flaticon.com/authors/monkik"></div>
<div class="icon_box_title">Fun leisure trips</div>
<p class="icon_box_text">Lorem ipsum dolor sit amet, consectetur adip iscing elit. Fusce fringilla lectus nec diam auctor, ut fringilla diam sagittis.</p>
Read More
</div>
</div>
<!-- Icon Box -->
<div class="col-lg-4 icon_box_col">
<div class="icon_box">
<div class="icon_box_image"><img src="images/service_3.svg" class="svg" alt="https://www.flaticon.com/authors/monkik"></div>
<div class="icon_box_title">Plane tickets</div>
<p class="icon_box_text">Lorem ipsum dolor sit amet, consectetur adip iscing elit. Fusce fringilla lectus nec diam auctor, ut fringilla diam sagittis.</p>
Read More
</div>
</div>
</div>
</div>
</div>
<!-- Newsletter -->
<div class="newsletter">
<!-- Image by https://unsplash.com/#garciasaldana_ -->
<div class="newsletter_background" style="background-image:url(images/newsletter.jpg)"></div>
<div class="container">
<div class="row">
<div class="col-lg-10 offset-lg-1">
<div class="newsletter_content">
<div class="newsletter_title text-center">Subscribe to our Newsletter</div>
<div class="newsletter_form_container">
<form action="#" id="newsletter_form" class="newsletter_form">
<div class="d-flex flex-md-row flex-column align-content-center justify-content-between">
<input type="email" id="newsletter_input" class="newsletter_input" placeholder="Your E-mail Address">
<button type="submit" id="newsletter_button" class="newsletter_button">Subscribe</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<!-- Footer Column -->
<div class="col-lg-4 footer_col">
<div class="footer_about">
<!-- Logo -->
<div class="logo_container">
<div class="logo">
<div>destino</div>
<div>travel agency</div>
<div class="logo_image"><img src="images/logo.png" alt=""></div>
</div>
</div>
<div class="footer_about_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar sed mauris eget tincidunt. Sed lectus nulla, tempor vel eleifend quis, tempus rut rum metus. Pellentesque ultricies enim eu quam fermentum hendrerit.</div>
<div class="copyright"><!-- 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="fa fa-heart-o" aria-hidden="true"></i> by Colorlib
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></div>
</div>
</div>
<!-- Footer Column -->
<div class="col-lg-4 footer_col">
<div class="footer_latest">
<div class="footer_title">Latest News</div>
<div class="footer_latest_content">
<!-- Footer Latest Post -->
<div class="footer_latest_item">
<div class="footer_latest_image"><img src="images/latest_1.jpg" alt="https://unsplash.com/#peecho"></div>
<div class="footer_latest_item_content">
<div class="footer_latest_item_title">Brazil Summer</div>
<div class="footer_latest_item_date">Jan 09, 2018</div>
</div>
</div>
<!-- Footer Latest Post -->
<div class="footer_latest_item">
<div class="footer_latest_image"><img src="images/latest_2.jpg" alt="https://unsplash.com/#sanfrancisco"></div>
<div class="footer_latest_item_content">
<div class="footer_latest_item_title">A perfect vacation</div>
<div class="footer_latest_item_date">Jan 09, 2018</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer Column -->
<div class="col-lg-4 footer_col">
<div class="tags footer_tags">
<div class="footer_title">Tags</div>
<ul class="tags_content d-flex flex-row flex-wrap align-items-start justify-content-start">
<li class="tag">travel</li>
<li class="tag">summer</li>
<li class="tag">cruise</li>
<li class="tag">beach</li>
<li class="tag">offer</li>
<li class="tag">vacation</li>
<li class="tag">trip</li>
<li class="tag">city break</li>
<li class="tag">adventure</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="styles/bootstrap4/popper.js"></script>
<script src="styles/bootstrap4/bootstrap.min.js"></script>
<script src="plugins/greensock/TweenMax.min.js"></script>
<script src="plugins/greensock/TimelineMax.min.js"></script>
<script src="plugins/scrollmagic/ScrollMagic.min.js"></script>
<script src="plugins/greensock/animation.gsap.min.js"></script>
<script src="plugins/greensock/ScrollToPlugin.min.js"></script>
<script src="plugins/easing/easing.js"></script>
<script src="plugins/parallax-js-master/parallax.min.js"></script>
<script src="js/about_custom.js"></script>
</body>
</html>
</template>
<script>
export default {
name: 'About',
}
</script>
Have you any idea why it runs fine in production mode while in development it can't? I've googled it very intensive, but I only know the issue with prettify which seems to be prevented in my case.

Prevent anchor tags jump to top of page while using target php

for a school project i'm working on a site. Now I am working on a view buttons that show different divs, I came quite far but have this annoying thing going on.
If i click an anchor tag it will show the div but it will set me at the top of the page.
I tried doing it with javascript using return false or e.preventdefault but then my divs won't show.
I hope that someone can help me out.
<div class="nav-referenties">
ALLES
WEBSITES
HUISSTIJLEN
VERPAKKINGEN
DIVERSEN
<hr class="onderlijn-referenties">
</div>
</div>
</div>
<?php
switch(#$_GET['target']) {
case 'Alles': default :
echo '<div class="row">
<div class="col-lg-3 col-sm-6 col-xs-12">
<div class="arrow-left">
<i class="fa fa-chevron-circle-left" aria-hidden="true"></i>
</div>
<div class="items-referenties">
<div class="img-veld-referenties-1">
<img src="Images/items-referenties/1.png" alt="">
</div>
<h1>lorem ipsum</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-xs-12">
<div class="items-referenties">
<div class="img-veld-referenties-2">
<img src="Images/items-referenties/2.png" alt="">
</div>
<h1>lorem ipsum</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-xs-12">
<div class="items-referenties">
<div class="img-veld-referenties-1">
<img src="Images/items-referenties/3.png" alt="">
</div>
<h1>lorem ipsum</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-xs-12">
<div class="arrow-right">
<i class=" fa fa-chevron-circle-right" aria-hidden="true"></i>
</div>
<div class="items-referenties">
<div class="img-veld-referenties-2">
<img src="Images/items-referenties/4.png" alt="">
</div>
<h1>lorem ipsum</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
</div>
</div>
</div>';
break;
case 'Websites':
echo "Hier zijn nog geen items voor.<br /><br /><br /><br />";
break;
case 'Huisstijlen':
echo "Hier zijn nog geen items voor.<br /><br /><br /><br />";
break;
case 'Verpakkingen':
echo "Hier zijn nog geen items voor.<br /><br /><br /><br />";
break;
case 'Diversen':
echo "Hier zijn nog geen items voor.<br /><br /><br /><br />";
break;
}
?>
`

You do not need to use PHP. Simply you can do this only with HTML by the following
// Links
<div class="nav-referenties">
ALLES
WEBSITES
HUISSTIJLEN
VERPAKKINGEN
DIVERSEN
<hr class="onderlijn-referenties">
</div>
// Divs
<div id="Alles"></div>
<div id="Websites"></div>
<div id="Huisstijlen"></div>
<div id="Verpakkingen"></div>
<div id="Diversen"></div>
Again if you want some dynamic actions and animations, you can use Animate Scroll plugin.

Bootstrap3 Carousel Caption from thumbnail

I want to do Bootstrap 3 carousel with image change when mouse cursor will be on thumbnail under carousel.
Now I've got something like this, I've got carousel and thumbnails under it, in bootstrap normally image changes with time , I want this if it's possible to change with time and when you point your mouse to thumbnail under carousel image will change also.
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1"></li>
<li data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img data-src="holder.js/900x500/auto/#777:#777" alt="900x500" >
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#666" alt="900x500" >
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#555:#5555" alt="900x500"
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<div class="container thumbs">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" style="display: inline;" alt=""> </a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://www.vpwallpapers.com/wp-content/uploads/2013/11/Cat-Wallpaper-10.png" style="display: inline;" alt="">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://www.vpwallpapers.com/wp-content/uploads/2013/11/Cat-Wallpaper-10.png" style="display: inline;" alt="">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://www.vpwallpapers.com/wp-content/uploads/2013/11/Cat-Wallpaper-10.png" style=" display: inline;" alt="">
</a>
</div>
</div>
</div>
and bootply:
http://bootply.com/104037
Thanks for your help , best regards.

There is this option called number which you can use to slide to a specific image. See link
.carousel(number)
Cycles the carousel to a particular frame (0 based, similar to an
array).
All you need to get index value of the hovered thumb and pass that as the option to carousel.
$('.thumbnail').on('mouseover',function(){
var slide_to = $('.thumbnail').index($(this));
$('.carousel').carousel(slide_to);
});
See Demo