We Keep Coding

How to change styles/remove certain elements when moving elements from one list to another using sortable?

This is the case. I have List 1 (id=favoriteList) and List 2 (id=otherList).
The code for list one is this:
<div class="generic_feature_list" data-role="content" data-theme="c">
<ul data-role="listview" data-inset="true" data-theme="d" id="favoriteList">
<li data-role="list-divider">
<div class="row">
<div class="col-md-6">
<span>Holidays</span>
</div>
<div class="col-md-6">
€2000
</div>
</div>
</li>
</ul>
</div>
The code for list 2:
<div data-role="content" data-theme="c">
<ul style="list-style-type: none;" data-role="listview" data-inset="true" data-theme="d" id="otherList">
<li data-role="list-divider">
<div class="row">
<div class="col-xl-6 col-lg-6">
<div class="card l-bg-blue-dark">
<div class="card-statistic-3 p-4">
<div class="card-icon card-icon-large"><i class="fas fa-laptop"></i></div>
<div class="mb-4">
<h5 class="card-title mb-0">Laptop</h5>
</div>
<div class="row align-items-center mb-2 d-flex">
<div class="col-8">
<h2 class="d-flex align-items-center mb-0">
€1500
</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
and my js and refs:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
<script>
let favoriteList = document.getElementById('favoriteList');
let otherList = document.getElementById('otherList');
let favorite_list = Sortable.create(favoriteList, {
animation: 150,
group: 'shared',
ghostClass: 'sortable-ghost',
});
let other_list = Sortable.create(otherList, {
animation: 150,
group: 'shared',
ghostClass: 'sortable-ghost',
sort: false
});
$(function(){
var removeIntent = false;
$('#otherList').sortable({
over: function () {
removeIntent = false;
},
out: function () {
removeIntent = true;
},
beforeStop: function (event, ui) {
if(removeIntent == true){
ui.item.remove();
}
}
});
});
</script>
I would like to transform the elements from list 2 like elements from list 1 so I suppose I would need to remove certains divs and change some styles.
I've followed these instructions with no luck:
How to remove the text of sortable area when item is dropped on it?
Sortable element stay after remove()
How to remove an item that is pulled away from it's list?
How to change sortable element's style while dragging?
Remove item after successful JQuery Sortable action
jQueryUI Sortable - Remove a li from the sortable list
Could somebody please help me?

How to create Multi filter Gallery

The product Red Small has the property Size small BUT NOT Medium.
The product Red Medium has the property Medium BUT NOT small.
If the checkbox is selected for both properties, the plugin checks if there are products that have the property small OR Medium.
I need that only the product will show which have both selected properties. So small AND Medium.
How can I do it. can any one help me pls.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="multifilter-gallery-wrap">
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<ul class="multifilter-gallery-nav nav">
<li class="nav-item dropdown">
Color
<ul class="dropdown-menu not-close-dropdown" data-display="static">
<li class="multifilter-gallery-button" data-filter="red">
<input type="checkbox" value="on">
Red
</li>
</ul>
</li>
<li class="nav-item dropdown">
Size
<ul class="dropdown-menu not-close-dropdown">
<li class="multifilter-gallery-button" data-filter="small">
<input type="checkbox">
Small
</li>
<li class="multifilter-gallery-button" data-filter="medium">
<input type="checkbox">
Medium
</li>
</ul>
</li>
<li class="multifilter-gallery-button clear btn btn-secondary" data-filter="all">Reset</li>
</ul>
</nav>
<div class="row mt-5" >
<div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box red small ">
<div class="bg-success m-2" style="height: 200px">
<h2 class="text-white">Red Small</h2>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-4 multifilter-gallery-box red medium ">
<div class="bg-success m-2" style="height: 200px">
<h2 class="text-white">Red medium</h2>
</div>
</div>
</div>
<!--end portfolio grid -->
</div>
</div>
</div>
</div>
<script type="text/javascript">
(function ($) {
$(document).ready(function() {
// venue filter script
$(".multifilter-gallery-button").click(function(){
var value = $(this).attr('data-filter');
if(value == "all")
{
$(this).addClass("active");
$(".multifilter-gallery-button").not(this).removeClass('active').find('input[type="checkbox"]').attr('checked',false);
$('.multifilter-gallery-box').show('1000');
}
else
{
$('.multifilter-gallery-button.active[data-filter="all"]').removeClass('active');
if ($(this).hasClass("active")) {
$(this).removeClass("active");
$(this).find('input[type="checkbox"]').attr('checked',false);
}else{
$(this).addClass("active");
$(this).find('input[type="checkbox"]').attr('checked',true);
}
if($('.multifilter-gallery-button.active').length){
var classes = '';
$('.multifilter-gallery-button.active').each(function(index, el) {
if(index == 0){
classes += '.'+$(this).attr('data-filter');
}else{
classes += ',.'+$(this).attr('data-filter');
}
});
$(".multifilter-gallery-box").not(classes).hide('3000');
$('.multifilter-gallery-box').filter(classes).show('3000');
}else{
$('.multifilter-gallery-button[data-filter="all"]').click();
}
}
});
$('ul.not-close-dropdown').on('click', function (event) {
event.stopPropagation();
});
///////////
})
})(jQuery);
</script>

if($('.multifilter-gallery-button.active').length){
var classes = '';
$('.multifilter-gallery-button.active').each(function(index, el) {
classes += '.'+$(this).attr('data-filter');
});
Basically all you need is to remove the "," from the selector. If you have the classes one after another with no spaces, only the elements with all those classes will fit the selection. So where you build your classes variable, you remove the ","

Why jquery toggleClass() only works in even siblings?

I have DOM like this in a Rails app:
<div class="post_info">
<div class="col">
<i class="post_comments">icon</i>
</div>
</div>
<div class="comments_body">
<ul>
<li>Many comments.</li>
</ul>
</div>
My target is hide and show '.comments_body' element right below the '.post_comment' icon which I clicked.
I've tried this:
css
.comments_body {
display: none;
}
.active {
display: block;
}
What I was trying to is target the icon's 'grandparent's next sibling', means the comments_body relating to this icon, then toggle it's display style.
my jquery code:
<script>
$(".post_info").click(function(event) {
$(event.target).parent().parent().next().toggleClass('active');
});
</script>
But it turns out this only works on even comments_body like the 2nd ,4th ,6th ,8th.
I checked dev tool, when I click on odd icon, the event wasn't be triggered.
How to solve this? Or is there better way to achieve this effect?
Update:
I tried the answers below but still not work. I put the page's github address here. Since it's a Rails app, you might need to clone it to local and try it. If so, run seed to generate fake data. Thanks!

First, you need to remove the : from this:
.comments_body: { /* <==== Remove that : */
display: none;
}
Then, this within your event handler is the .post_info element, so you can use that instead of $(e.target).parent().parent() which is inherently fragile (both because a small change to your markup breaks it, and because if you click within the .post_info but outside the icon, it will be wrong — which I suspect is why you're seeing the inconsistent behavior).
$(".post_info").click(function(event) {
$(this).next().toggleClass('active');
});
Live Example:
$(".post_info").click(function(event) {
$(this).next().toggleClass('active');
});
.comments_body {
display: none;
}
.active {
display: block;
}
<div class="post_info">
<div class="col">
<i class="post_comments">icon 1</i>
</div>
</div>
<div class="comments_body">
<ul>
<li>Many comments 1.</li>
</ul>
</div>
<div class="post_info">
<div class="col">
<i class="post_comments">icon 2</i>
</div>
</div>
<div class="comments_body">
<ul>
<li>Many comments 2.</li>
</ul>
</div>
<div class="post_info">
<div class="col">
<i class="post_comments">icon 3</i>
</div>
</div>
<div class="comments_body">
<ul>
<li>Many comments 3.</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Side note: You might consider using event delegation for that handler rather than hooking the event on each individual .post_info. That way, if you add and remove .post_info instances at runtime, the handler will keep working.
Presumably these are in some kind of container, so you'd use:
$("selector-for-the-container").on("click", ".post_info", function(event) {
$(this).next().toggleClass('active');
});
Live Example:
$("#container").on("click", ".post_info", function(event) {
$(this).next().toggleClass('active');
});
// Works on #4 even though we add it later:
setTimeout(function() {
$("#container").append(
'<div class="post_info">' +
'<div class="col">' +
'<i class="post_comments">icon 4</i>' +
'</div>' +
'</div>' +
'<div class="comments_body">' +
'<ul>' +
'<li>Many comments 4.</li>' +
'</ul>' +
'</div>'
);
}, 800);
.comments_body {
display: none;
}
.active {
display: block;
}
<div id="container">
<div class="post_info">
<div class="col">
<i class="post_comments">icon 1</i>
</div>
</div>
<div class="comments_body">
<ul>
<li>Many comments 1.</li>
</ul>
</div>
<div class="post_info">
<div class="col">
<i class="post_comments">icon 2</i>
</div>
</div>
<div class="comments_body">
<ul>
<li>Many comments 2.</li>
</ul>
</div>
<div class="post_info">
<div class="col">
<i class="post_comments">icon 3</i>
</div>
</div>
<div class="comments_body">
<ul>
<li>Many comments 3.</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$(".post_info").click(function(event) {
$(event.target).parent().parent().next().toggleClass('active');
});
.comments_body {
display: none;
}
.active {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post_info">
<div class="col">
<i class="post_comments">icon</i>
</div>
</div>
<div class="comments_body">
<ul>
<li>Many comments.</li>
</ul>
</div>
<div class="post_info">
<div class="col">
<i class="post_comments">icon</i>
</div>
</div>
<div class="comments_body">
<ul>
<li>Many comments.</li>
</ul>
</div>
<div class="post_info">
<div class="col">
<i class="post_comments">icon</i>
</div>
</div>
<div class="comments_body">
<ul>
<li>Many comments.</li>
</ul>
</div>
I have made a example for you. It working fine. I dont see any problem in case of even odd selection. try making important your active element as
.active {
display: block !important;
}
if it still not creating desired result kindly let me know. I will put my code here. Cheers....

how to create a full-width dropdown menu using jquery

I am trying to create my custom full width menu using a simple hover function but my problem is as soon the mouse move out of the menu the subdiv also hides.
Can you help me with my code?
Here's my nav
HTML
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown" id="open-block-menu">
ONLINE STORE
</li>
</ul>
<div class="top-block">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>HELLO WORLD</h1>
</div>
</div>
</div>
</div>
JS
$('#open-block-menu').hover(function() {
$('.top-block').slideDown();
}, function() {
$('.top-block').slideUp();
});

Instead of hover method, you could use mouseenter and mouseleave as below, so every-time when mouseenters it show below menus and on mouse pointer leave below menu hides again.
$('#open-block-menu').on("mouseenter",function() {
$('.top-block').slideDown();
});
$('.top-block').on("mouseleave",function() {
$(this).slideUp();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown" id="open-block-menu">
ONLINE STORE
</li>
</ul>
<div class="top-block">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>HELLO WORLD</h1>
</div>
</div>
</div>
</div>

Try to change ur markup like this:
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown" id="open-block-menu">
ONLINE STORE
<div class="top-block">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>HELLO WORLD</h1>
</div>
</div>
</div>
</div>
</li>
</ul>

scroll to top using href id

I want to scroll the div to top position.I have problem with get the href value.now 'a' returns undefined in console.log(a);
function myFunction()
{
var a=$(this).attr('href');
console.log(a);
$('html, body').animate({scrollTop: $('#'+a).offset().top-40}, 500);
}
#consulting,#segments,#partner,#insights{min-height:100vh;}
.secMenu{position:fixed;
}
<div class="container-fluid">
<div class="row secMenu">
<div class="col-md-9 col-sm-12 menu">
<ul class="nav navMenu">
<li class="test1">Consulting & Solutions</li>
<li class="test2">Segments</li>
<li class="test3">Our Partners</li>
<li class="test4">Perspectives</li>
</ul>
</div>
</div> <!--End of second menu -->
<div class="row">
<div id="consulting">
div1
</div>
<div id="segments">
div11
</div>
<div id="partner">
div111
</div>
<div id="insights">
div1111
</div>
</div>
</div>

I've made an alternative to what you used, but it does the same thing. I removed the function you used and used jQuery instead. Hope my answer works for you:
$('.nav li a').on('click', function(e) {
e.preventDefault();
var a = $(this).attr('href');
$('html, body').animate({
scrollTop: $(a).offset().top
}, 500);
});
#consulting,
#segments,
#partner,
#insights {
min-height: 100vh;
}
.secMenu {
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row secMenu">
<div class="col-md-9 col-sm-12 menu">
<ul class="nav navMenu">
<li class="test1">Consulting & Solutions
</li>
<li class="test2">Segments
</li>
<li class="test3">Our Partners
</li>
<li class="test4">Perspectives
</li>
</ul>
</div>
</div>
<!--End of second menu -->
<div class="row">
<div id="consulting">
div1
</div>
<div id="segments">
div11
</div>
<div id="partner">
div111
</div>
<div id="insights">
div1111
</div>
</div>
</div>
To see it in action you can hit the Run code snippet button above or you can see a fiddle here.

Because this is bind to the global object by default (in browser it's window).
You can try pass this to myFunction() like this: myFunction(this). And in myFunction definition: function myFunction(target) {...}, target now refers to the anchor element.