Develop Reference

How to know the selected card style and pass the value to the backend

I want to get the value in a single card selected by the user and post it to the backend
<div class="card-body">
<div class="swiper-container swipercards">
<div class="swiper-wrapper pb-4">
<div class="swiper-slide ">
<div class="card border-0 bg-default text-white">
<div class="card-header">
<div class="row">
<div class="col-auto">
<i class="material-icons vm text-template">credit_card</i>
</div>
<div class="col pl-0">
<h6 class="mb-1">Visa</h6>
</div>
</div>
</div>
<div class="card-body">
<h5 class="mb-0 mt-3">4444 5264 2541 26651</h5>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<p class="mb-0">26/21</p>
<p class="small ">Expiry date</p>
</div>
<div class="col-auto align-self-center text-right">
<p class="mb-0">Agnish Carvan</p>
<p class="small">Card Holder</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide ">
<div class="card border-0 bg-warning text-white">
<div class="card-header">
<div class="row">
<div class="col-auto">
<i class="material-icons vm text-template">credit_card</i>
</div>
<div class="col pl-0">
<h6 class="mb-1">Maestro</h6>
</div>
</div>
</div>
<div class="card-body">
<h5 class="mb-0 mt-3">4444 5264 2541 26651</h5>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<p class="mb-0">26/21</p>
<p class="small ">Expiry date</p>
</div>
<div class="col-auto align-self-center text-right">
<p class="mb-0">Agnish Carvan</p>
<p class="small">Card Holder</p>
</div>
</div>
</div>
</div>
</div>

Welcome AegisFor. It looks like you're using Swiper.js?
According to the docs, under events, here is how you determine the selected item in the carousel:
const swiper = new Swiper('.swiper', {
// ...
});
swiper.on('slideChange', function () {
console.log('slide changed', swiper.activeIndex);
});
https://swiperjs.com/swiper-api#events
You could get the values by referring to the slide's attributes, like this:
....
<div class="swiper-wrapper pb-4" >
<div class="swiper-slide " id="card-1" data-card-number="12345">
....
When you change slides, refer to the div that matches the activeIndex of the carousel:
var activeCard = document.getElementById("card-" + swiper.activeIndex);
Now you can get the card number:
var cardNumber = activeCard.getAttribute("data-card-number")
How you send it to your backend depends on what backed you have. You might do something similar to this:
fetch('http://example.com/card?card-number=' + cardNumber)
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
The documentation at https://swiperjs.com/swiper-api is quite good. Remember to read the docs thoroughly before posting to SO.

Owl Carousel change content of the element on click

I have a problem with owl carousel and till now I don't have any ideas how to fix it.
So on the image 1 you can see the normal behaviour of the slider. On the second one you will see the extended functionality of it. The idea is very simple, when user click on the element, he should expand it, but when the element is expanded all other element goes to 2 rows and I don't want to happen.
Image 1
Image 2
also Source code of one element
<div class="element box-shadow">
<div class="child">
<div class="row">
<div class="col-xs-12 col-md-8">
<span>05.</span>
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
<p class="view-more">View more <img src="assets/images/view-more.svg" /></p>
</div>
<div class="col-xs-12 col-md-4 portfolio-image" >
<img src="assets/images/inventive-small-img.png" />
</div>
</div>
</div>
<div class="parent hidden">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="row " style="margin-bottom: 15px;" >
<div class="col-xs-12 col-md-3">
<img src="assets/images/inventive-small-img.png" style="width:34px" class="rounded-circle">
</div>
<div class="col-xs-12 col-md-9 text no-padding" >
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 social-el" style="padding-left:0;">
<div class="stars">
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/half_star.svg" />
<img class="mr-2" src="assets/images/empty_star.svg" />
<img src="assets/images/empty_star.svg" />
</div>
</div>
</div>
<img src="assets/images/inventive-studio-img.png" class="img-fluid">
<div class="content">
<p >Designing and producing catalogs, sales sheets, proposals, scenario illustrations, brochures, posters, custom displays for trade shows and in-house exhibits and all others items.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<a class="view-less" href="#"><img src="assets/images/view-more.svg"/> View Less</a>
</div>
<div class="col-xs-12 col-md-6">
<div class="stars">
<img src="assets/images/Facebook.svg"/>
<img class="mr-10" src="assets/images/twitter.svg"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
also will share and jquery code
$(".owl-carousel").owlCarousel({
margin:10,
loop: true,
autoWidth: true,
items:3,
rewind: true,
autoplay: true,
responsiveClass:true,
});
$('.work').each(function(i, el) {
$parent = $(el);
$('.element', $parent).each(function(i, item) {
$element = $(item)
$element.on('click', function(e) {
$current = $(this)
console.log($current)
if ($('.parent', $current).hasClass('hidden')) {
$('.parent', $current).removeClass('hidden');
$current.addClass('expand-element');
$current.css('border-radius', 10)
$('.child', $current).addClass('hidden');
} else {
$current.removeClass('expand-element');
$('.parent', $current).removeClass('visible').addClass('hidden');
$current.css('border-radius', 20)
$('.child', $current).removeClass('hidden');
}
})
})
})

jquery only allow one div element to be selected at a time on click

I have styled some markup where the user can select a DIV and it shows highlighted.. this works fine, however, I want to only allow one DIV to be highlighted and selected at time.. currently the user can select all 3 DIVS and they will all show highlighted. I use jquery toggleClass to add/remove "active" class to DIV. "active" class is styled in css to show blue background.
how can I stop users from selecting all 3?
$('.pricecard.aircraft').click(function() {
// this will fire when you click view
$(this).toggleClass('active');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4 my-1">
<div class="card pricecard aircraft active h-100">
<div class="card-body">
<span class="price1">£20,944</span></p>
</div>
</div>
</div>
<div class="col-sm-4 my-1">
<div class="card pricecard aircraft h-100">
<div class="card-body">
<span class="price2">£20,944</span></p>
</div>
</div>
</div>
<div class="col-sm-4 my-1">
<div class="card pricecard aircraft h-100">
<div class="card-body">
<span class="price3">£20,944</span></p>
</div>
</div>
</div>

To achieve your goal call removeClass() on all the other .pricecard.aircraft elements which are not the one which was clicked on:
let $divs = $('.pricecard.aircraft').click(function() {
$divs.not(this).removeClass('active');
$(this).toggleClass('active');
});
.active { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4 my-1">
<div class="card pricecard aircraft active h-100">
<div class="card-body">
<span class="price1">£20,944</span>
</div>
</div>
</div>
<div class="col-sm-4 my-1">
<div class="card pricecard aircraft h-100">
<div class="card-body">
<span class="price2">£20,944</span>
</div>
</div>
</div>
<div class="col-sm-4 my-1">
<div class="card pricecard aircraft h-100">
<div class="card-body">
<span class="price3">£20,944</span>
</div>
</div>
</div>

Just using HTML and CSS, no JavaScript is needed.
[name="price"]:checked + label > div {
background-color: yellow;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<input type="radio" name="price" id="price1" value="20944" class="d-none"/>
<label class="col-sm-4 my-1 d-inline-block" for="price1">
<div class="card pricecard aircraft active h-100">
<div class="card-body">
<span class="price1">£20,944</span></p>
</div>
</div>
</label>
<input type="radio" name="price" id="price2" value="20944" class="d-none"/>
<label class="col-sm-4 my-1 d-inline-block" for="price2">
<div class="card pricecard aircraft h-100">
<div class="card-body">
<span class="price2">£20,944</span></p>
</div>
</div>
</label>
<input type="radio" name="price" id="price3" value="20944" class="d-none"/>
<label class="col-sm-4 my-1 d-inline-block" for="price3">
<div class="card pricecard aircraft h-100">
<div class="card-body">
<span class="price3">£20,944</span></p>
</div>
</div>
</label>

You can use:
$('.pricecard.aircraft').click(function() {
$('.pricecard.aircraft').removeClass('active');
$(this).addClass('active');
})
.pricecard.aircraft.active {
background-color: yellow
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4 my-1">
<div class="card pricecard aircraft active h-100">
<div class="card-body">
<span class="price1">£20,944</span></p>
</div>
</div>
</div>
<div class="col-sm-4 my-1">
<div class="card pricecard aircraft h-100">
<div class="card-body">
<span class="price2">£20,944</span></p>
</div>
</div>
</div>
<div class="col-sm-4 my-1">
<div class="card pricecard aircraft h-100">
<div class="card-body">
<span class="price3">£20,944</span></p>
</div>
</div>
</div>
This works!

Toggle div and expanding/compress other

I'm sorry this is quite a silly question, but maybe it's because of being working for a few hours, but I can't wrap my head around this. I mean, I think I can solve this by manipulating the whole div structure with javascript, but I can't help to feel there has to be a way simpler solution that I'm not thinking of.
Here's a fiddle of what I got right now:
https://jsfiddle.net/aq9Laaew/42687/
<main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main">
<div class="container-fluid colindex">
<div class="row">
<div class="col-md-9 stackem">
<div class="card">
<ol class="breadcrumb">
<li class="breadcrumb-item">Index</li>
<li class="breadcrumb-item active"></li>
</ol>
<h4 class="card-header">Test
<button class="btn btn-primary add" type="button" data-toggle="tooltip" data-placement="bottom" data-trigger="hover" title="test"><i class="material-icons" id="sidebaricons">bookmark</i></button>
</h4>
<div class="card-body">
<div class="container index">
<div class="row py-3 px-4">
<div class="col-md-6">
<p></p>
</div>
<div class="col-md-6">
<p></p>
</div>
</div>
<div class="row py-3 px-4">
<div class="col-md-6">
<p>test</p>
</div>
<div class="col-md-6">
<p>test</p>
</div>
</div>
<div class="row py-3 px-4">
<div class="col-md-6">
<p>test</p>
</div>
<div class="col-md-6">
<p>test</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<p>testlist</p>
</div>
</div>
</div>
</main>
So the div which says "testlist" on the right, I got an include there with a list with links for fast access.
Question: What I'm trying to achieve is adding a button on this list which will toggle it. The thing is, when it's hidden, I want the other divs on the left side to expand and takes up the space on the list. When the list would be toggled again it would become like it is at the moment again.
Again, sorry for the (I'm sure) silly question, and thanks a ton in advance.

Have you tried using <div class="col-md stackem">
instead of <div class="col-md-9 stackem">
to let bootstrap auto-adjust the width?

<a href=''> not working on the other pages

Here's the first page that the a href='' code is working .
moneypro.online/website-design
<div class="row animate-box fadeInUp animated-fast">
<!-- Tabs -->
<div class="gtco-tab-content tab-content animated-fast active fadeIn" data-tab-content="1">
<div class="col-md-6">
<div class="gtco-video gtco-bg gtco-image img-responsive" style="background-image: url(/WebsiteDesign.png); background-size: contain; ">
</div>
</div>
<div class="col-md-6">
<h2>Website Design</h2>
<p>As a business start with an idea, an online identity starts with a design concept. Here at Euro ITS we listen to client business goals and incorporate it within our design. Together with our knowledge of digital marketing, our website designs are: </p>
<div class="row">
<div class="col-md-12">
<h4>✔ Responsive</h4>
</div>
<div class="col-md-12">
<h4>✔ User oriented</h4>
</div>
<div class="col-md-12">
<h4>✔ Search engine ready</h4>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-success btn-block">Appointment</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info btn-block">Inquiry</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-warning btn-block">Pricing</button>
</div>
</div>
</div>
</div>
</div>
and here is the other page that the a href='' code does not work.
moneypro.online/services
<div class="gtco-tab-content-wrap" style="height: 643px;" data-section="services">
<div class="gtco-tab-content tab-content animated-fast active fadeIn" data-tab-content="1">
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="gtco-video gtco-bg img-responsive" style="background-image: url(assets/public/images/icons/WebsiteDesign.png); background-size: contain; ">
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="row">
<div class="col-md-12">
<div class="panel">
<div class="panel panel-heading panel-cust-bg">
<h2 class="cust-txt"><strong>Website Design</strong></h2>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<p>As a business start with an idea, an online identity starts with a design concept. Here at Euro ITS we listen to client business goals and incorporate it within our design. Together with our knowledge of digital marketing, our website designs are: </p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4>✔ Responsive</h4>
</div>
<div class="col-md-12">
<h4>✔ User oriented</h4>
</div>
<div class="col-md-12">
<h4>✔ Search engine ready</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="/contact" class="btn btn-success btn-block" role="button" >Appointment</a>
</div>
<div class="col-md-4">
Inquiry
</div>
<div class="col-md-4">
Pricing
</div>
</div>
</div>
</div>
they're are exactly the same and i don't know why the other page is working . here's the live website of it
live example
Can someone please explain it to me.

Ok, here is the difference between the two:
Working:
<a href="/contact">
<button type="button" class="btn btn-success btn-block">
Appointment
</button>
</a>
Not Working:
<a href="/contact" class="btn btn-success btn-block" role="button">
Appointment
</a>
You are adding class btn to "a" tag, and it thinks the tag is a button so it ignores href attribute.

Every href element needs a corresponding anchor which should be a name or id attribute and it must match/exist in the page.
This example by w3schools show a good practice of href.