Develop Reference

How to hide all other div except one that is clicked?

How to hide other and left just one that is click?
I tried something like this, but this doesn't work since all my divs has different ids
$(document).ready(function() {
$('.campingTrips').click(function(e) {
var image = e.target,
interval,
height = 200,
width = 200,
z = $(this).css("z-index");
$(this).css("z-index", z + 10);
$('#product-container').addClass('disable-click');
$('.unhidden').not($(this).parent().parent()).addClass('noOpacity');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="campingTrips">
<h1>Camping trips</h1>
</div>
<div id="cityBreaks">
<h1>City breaks</h1>
</div>
<div id="roadTrips">
<h1>Road trips</h1>
</div>
<div id="cruises">
<h1>Cruises</h1>
</div>
<div id="groupTours">
<h1>Group tours</h1>
</div>
<div id="girlsTrips">
<h1>Girls’ trips</h1>
</div>
I'm using Java, Spring Boot, this is how I'm trying to include jQuery
<script src="webjars/jquery/1.9.1/jquery.min.js"></script>
<script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="#{/js/index.js}"></script>
Edit: NEW CODE
So my html is now like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="campingTrips" class="clickable"><h1>Camping trips</h1>
</div>
<div id="cityBreaks" class="clickable"><h1>City breaks</h1>
</div>
<div id="roadTrips" class="clickable"><h1>Road trips</h1>
</div>
<div id="cruises" class="clickable"><h1>Cruises</h1>
</div>
<div id="groupTours" class="clickable"><h1>Group tours</h1>
</div>
<div id="girlsTrips" class="clickable"><h1>Girls’ trips</h1>
</div>
And js like this:
$(document).ready(function () {
$('clickable').on('click', function () {
var current = $(this).attr('id');
$('clickable:not(#' + current + ')').hide();
})
})
Error from inspect console is:
Uncaught ReferenceError: $ is not defined
at index.js:119:1

You can hide all and then show the clicked one, will have the same effect.
$('.clickable').on('click', (e) =>
{
// Hide all
$('.clickable').hide();
// Show this
$(e.target).closest('div').show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="campingTrips" class="clickable"><h1>Camping trips</h1>
</div>
<div id="cityBreaks" class="clickable"><h1>City breaks</h1>
</div>
<div id="roadTrips" class="clickable"><h1>Road trips</h1>
</div>
<div id="cruises" class="clickable"><h1>Cruises</h1>
</div>
<div id="groupTours" class="clickable"><h1>Group tours</h1>
</div>
<div id="girlsTrips" class="clickable"><h1>Girls’ trips</h1>
</div>
But i strongly suggest to use a specific class for selecting those div elements, or base your code in a parent container.

you can do following:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="campingTrips">
<h1>Camping trips</h1>
</div>
<div id="cityBreaks">
<h1>City breaks</h1>
</div>
<div id="roadTrips">
<h1>Road trips</h1>
</div>
<div id="cruises">
<h1>Cruises</h1>
</div>
<div id="groupTours">
<h1>Group tours</h1>
</div>
<div id="girlsTrips">
<h1>Girls’ trips</h1>
</div>
and
<script>
$(document).ready(function() {
$('div').on('click', function() {
var current = $(this).attr('id');
$('div:not(#' + current + ')').hide();
})
})
</script>
It will hide every other div except the one that is clicked.

Delete duplicate Item in Each function

I want to archive that I remove all duplicate items within every each.
So I go a div with items:
<div class="each">
<div>Test2</div>
<div>Test</div>
<div>Test</div>
</div>
<div class="each">
<div>Test2</div>
<div>Test</div>
<div>Test</div>
</div>
And my Jquery so far:
$('.dropPlace').each(function(index){
console.log($(this).text());
});
So I want to check within every div is there existing two duplicate text. And only removed with the duplicated once within the div.
So the result would be this:
<div class="each">
<div>Test2</div>
</div>
<div class="each">
<div>Test2</div>
</div>

The below can be optimized for sure, but it will give the result you asked for:
<div class="each">
<div>Test2</div>
</div>
<div class="each">
<div>Test2</div>
</div>
$('.each').each(function() {
const textAr = [];
let parent = $(this);
parent.children('div').each(function() {
let _this = $(this), elText = _this.text();
if(textAr.includes(elText)) {
parent.children('div').each(function() {
let _child = $(this);
if(_child.text() == elText){
_child.remove();
}
})
}
else textAr.push(elText)
});
});
.each {
margin-bottom: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="each">
<div>Test2</div>
<div>Test</div>
<div>Test</div>
</div>
<div class="each">
<div>Test2</div>
<div>Test</div>
<div>Test</div>
</div>

here is a working demo.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var map = {};
$("#remove").click(function () {
// use an object as map
var map = {};
$(".dropPlace").each(function () {
var value = $(this).text();
if (map[value] == null) {
map[value] = true;
} else {
$(this).remove();
}
});
});
});
</script>
</head>
<body>
<div class="each">
<div class="dropPlace">Test2</div>
<div class="dropPlace">Test</div>
<div class="dropPlace">Test</div>
</div>
<div class="each">
<div class="dropPlace">Test2</div>
<div class="dropPlace">Test</div>
<div class="dropPlace">Test</div>
</div>
<button id="remove">remove</button
</body>
</html>

How to hide a div if another has no content

I have some code where I need to hide a div if another is empty.
Basically, if .plant_profile_link has no content, hide .plant_profile_display
My attempt
$(document).ready(function() {
if (!$.trim($(".plant_profile_link").html()) == true)
$(".plant_profile_display").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="et_pb_text_inner">
<div class="plant_profile_display">Bobo</div>
</div>
</div>
<!-- .et_pb_text -->
<div class="et_pb_module et_pb_text et_pb_text_7_tb_body et_pb_text_align_left et_pb_bg_layout_light">
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>

Your code works if we add jQuery
I would user toggle
$(function() {
$(".plant_profile_display").toggle($(".plant_profile_link").text().trim() !== "");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="et_pb_text_inner">
<div class="plant_profile_display">Bobo</div>
</div>
</div>
<!-- .et_pb_text -->
<div class="et_pb_module et_pb_text et_pb_text_7_tb_body et_pb_text_align_left et_pb_bg_layout_light">
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>

Maybe something like this suits you
$(document).ready(function() {
var $plantLinks = $('.plant_profile_link')
var $plantDisplay = $('.plant_profile_display')
if($plantLinks.children().length > 0 || $plantLinks.text().length > 0) {
$plantDisplay.show();
} else {
$plantDisplay.hide();
}
});

jquery hiding an array of id

I am trying to build a bookmarklet that will hide all data-agentid selectors that have a data-color selector = 30. so I have a list on the website that look something like this
<div class="sch" data-agent-id=1></div>
<div data-agentid="1" data-color="30">
<div data-agentid="1" data-color="20">
...
<div class="sch" data-agent-id=2></div>
<div data-agentid="2" data-color="10">
<div data-agentid="2" data-color="20">
...
...
edited
There is a lot more code but I figure this is the important part.
I am thinking I can just build an array of ids where their color is 30 and then hide all of the ids in the array. My code is below but I don't think it is even building the array at this point.
(function() {
var arr = $('*[data-color="30"]').map(function() {
return $(this).data("data-agentid");
}).get().join();
$('*[data-agent-id=arr]').hide();
})();

Seems like you would just do this directly:
$('[data-color="30"]').hide()
Edit: Now that you've clarified what you're trying to do, it'll be more performant to select the elements once and iterate over them calling hide on the matching ones:
const agentsToHide =
Array.from(document.querySelectorAll('[data-color="30"'))
.reduce((agents, el) => {
const agentId = el.getAttribute("data-agentid")
if (!agents.includes(agentId)) agents.push(agentId)
return agents
}, [])
.forEach(agentId => {
document.querySelectorAll(`[data-agent-id="${agentId}"]`)
.forEach(el => {
el.style.display = "none"
})
})
<div class="sch" data-agent-id=1>Agent 1</div>
<div data-agentid="1" data-color="30">30</div>
<div data-agentid="1" data-color="30">30</div>
<div data-agentid="1" data-color="20">20</div>
<div class="sch" data-agent-id=2>Agent 2</div>
<div data-agentid="2" data-color="10">10</div>
<div data-agentid="2" data-color="20">20</div>

There is no selector that works off an array. So you would need to make a comma separated value
var selector = $('[data-color="30"]').map(function() {
return '[data-agent-id="' + $(this).data("agentid") + '"]';
}).get().join(',');
$(selector).hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-agentid="1" data-color="30"></div>
<div data-agentid="2" data-color="20"></div>
<div data-agentid="3" data-color="30"></div>
<div data-agent-id="1">1-1</div>
<div data-agent-id="2">2-1</div>
<div data-agent-id="3">3-1</div>
<div data-agent-id="1">1-2</div>
<div data-agent-id="2">2-2</div>
<div data-agent-id="3">3-2</div>
<div data-agent-id="1">1-3</div>
<div data-agent-id="2">2-3</div>
<div data-agent-id="3">3-3</div>
Other option is to use filter()
var ids = $('[data-color="30"]').map(function() {
return $(this).data('agentid');
}).get();
$('[data-agent-id]')
.filter(function () {
return ids.includes($(this).data('agent-id'));
})
.hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-agentid="1" data-color="30"></div>
<div data-agentid="2" data-color="20"></div>
<div data-agentid="3" data-color="30"></div>
<div data-agent-id="1">1-1</div>
<div data-agent-id="2">2-1</div>
<div data-agent-id="3">3-1</div>
<div data-agent-id="1">1-2</div>
<div data-agent-id="2">2-2</div>
<div data-agent-id="3">3-2</div>
<div data-agent-id="1">1-3</div>
<div data-agent-id="2">2-3</div>
<div data-agent-id="3">3-3</div>
Or just select in a loop
$('[data-color="30"]').each(function() {
var id = $(this).data('agentid');
$('[data-agent-id="' + id + '"]').hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-agentid="1" data-color="30"></div>
<div data-agentid="2" data-color="20"></div>
<div data-agentid="3" data-color="30"></div>
<div data-agent-id="1">1-1</div>
<div data-agent-id="2">2-1</div>
<div data-agent-id="3">3-1</div>
<div data-agent-id="1">1-2</div>
<div data-agent-id="2">2-2</div>
<div data-agent-id="3">3-2</div>
<div data-agent-id="1">1-3</div>
<div data-agent-id="2">2-3</div>
<div data-agent-id="3">3-3</div>

Plain and simple in vanilla javascript:
document.querySelectorAll('[data-color="30"]').forEach(function(item) {
item.style.display = "none";
});
<div data-agentid="1" data-color="30">Test30</div>
<div data-agentid="2" data-color="20">Test20</div>
<div data-agentid="1" data-color="30">Test30</div>
<div data-agentid="2" data-color="20">Test20</div>
<div data-agentid="1" data-color="30">Test30</div>
<div data-agentid="2" data-color="20">Test20</div>
<div data-agentid="1" data-color="30">Test30</div>

How to change last position in toggleClass

I try build some project with JQuery toggleClass. I want make position toggle follow some last record data.
This my HTML
<div class="action-lock">
<div class="toggle-pane">
<div class='unique' id='switch'>
<div class='toggle-text-off'>Unlocked</div>
<div class='glow-comp'></div>
<div class='toggle-button'></div>
<div class='toggle-text-on'>Locked</div>
</div>
</div>
</div>
And this JQuery
$scope.last = "a";
$('.unique').click(function (e) {
e.preventDefault();
if($scope.last == "b"){
$(this).toggleClass('toggle-on');
}else{
$(this).toggleClass('toggle-off');
}
});
I try but toggle position always in Locked, I don't know how to make position toggle from data $scope.last. Please help me to solved this problem. Thanks

var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.last = ""
$scope.toggleclick = function(last){
debugger;
if(last == "a"){
$(".toggle-text-on").toggleClass('toggle-on');
$(".toggle-text-off").toggleClass('toggle-off');
}else if(last != "a"){
$(".toggle-text-on").toggleClass('toggle-off');
$(".toggle-text-off").toggleClass('toggle-on');
}
};
}]);
.toggle-text-off.toggle-on,.toggle-text-on.toggle-on{display:block;}
.toggle-text-off,.toggle-text-on{display:none;}
.maginbt10{margin-bottom:10px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="controllerName">
<div class="action-lock">
<input type="text" ng-model="last" name="mail" class="maginbt10" />
<div class="toggle-pane">
<div class='unique' id='switch'>
<div class='toggle-text-off' ng-class="{'toggle-on':last != 'a'}">Unlocked</div>
<div class='glow-comp'></div>
<div class='toggle-button'></div>
<div class='toggle-text-on' ng-class="{'toggle-on':last == 'a'}">Locked</div>
</div>
</div>
</div>
</body>

You question isn't clear but this is my guess from your explanation.
$('.unique').click(function (e) {
e.preventDefault();
$(this).toggleClass('toggle-on').toggleClass('toggle-off');
});
and html
<div class="action-lock">
<div class="toggle-pane">
<div class='unique toggle-on' id='switch'>
<div class='toggle-text-off'>Unlocked</div>
<div class='glow-comp'></div>
<div class='toggle-button'></div>
<div class='toggle-text-on'>Locked</div>
</div>
</div>
</div>

var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.last = "a";
$scope.toggleclick = function(){
if($scope.last == "a"){
$(".toggle-text-on").toggleClass('toggle-off');
$(".toggle-text-off").toggleClass('toggle-on');
$scope.last = "b";
}else{
$(".toggle-text-on").toggleClass('toggle-on');
$(".toggle-text-off").toggleClass('toggle-off');
$scope.last = "a";
}
};
}]);
.toggle-on,.toggle-text-off.toggle-on{display:block;}
.toggle-off,.toggle-text-off{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="controllerName">
<div class="action-lock">
<div class="toggle-pane">
<div class='unique' id='switch'ng-click="toggleclick()">
<div class='toggle-text-off' ng-click="toggleclick()">Unlocked</div>
<div class='glow-comp'></div>
<div class='toggle-button'></div>
<div class='toggle-text-on' ng-click="toggleclick()">Locked</div>
</div>
</div>
</div>
</body>