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.

Filter page content with JQuery

I am trying to build a webpage inspired by this that changes page content based on button decision. I have basic scripts below, but they need some help/logic.
I need help getting the filter part to work for the page's content.
Thank you!
// Change button state - WORKING
$('.category-button').click(function() {
$('.category-button').removeClass('active')
$(this).addClass("active")
});
// Filter - NOT WORKING
$('.page-content').hide().first().show() // first bubbles or whatever comes first
// Turn user's choice into a filter
$categoryButton.on('click', function(e) {
var $category = $(this).data('target');
$pageContent.hide().filter('.' + $category).show(); // hide all content and then show only filtered
});
body {
background: #EDE8D1;
}
.hero {
background: #40838F;
color: white;
padding: 50px;
}
.category-button {
background: #0A1D29;
padding: 50px;
color: white;
text-transform: uppercase;
font-size: 16px;
}
.active {
background: #40838F;
}
<!-- BOOTSRAP CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="hero container-fluid text-center">
<h1>Hello, World!</h1>
</div>
<div class="container text-center">
<div class="row">
<h4>Choose a category:</h4>
</div>
<!-- end row -->
<div class="row">
<!-- Choose Bubbles: -->
<div class="col-md-4 col-sm-4 col-xs-4">
<h5 class="category-button" data-target="bubbles">Bubbles</h5>
</div>
<!-- end col-md-4 col-sm-4 col-xs-4 -->
<!-- Choose Trees: -->
<div class="col-md-4 col-sm-4 col-xs-4">
<h5 class="category-button" data-target="trees">Trees</h5>
</div>
<!-- end col-md-4 col-sm-4 col-xs-4 -->
<!-- Choose Ocean: -->
<div class="col-md-4 col-sm-4 col-xs-4">
<h5 class="category-button" data-target="ocean">Ocean</h5>
</div>
<!-- end col-md-4 col-sm-4 col-xs-4 -->
</div>
<!-- end row -->
<div class="row">
<h4>Your Choice:</h4>
</div>
<!-- end row -->
</div>
<!-- end container -->
<!-- BUBBLES PAGE CONTENT -->
<div class="container page-content bubbles">
<img alt="Picture of bubbles." width="100%" src="https://image.shutterstock.com/z/stock-vector-bubbles-background-223473784.jpg" />
</div>
<!-- end container -->
<!-- TREES PAGE CONTENT -->
<div class="container page-content trees">
<img alt="Picture of trees." width="100%" src="https://image.shutterstock.com/z/stock-photo-tree-550788622.jpg" />
</div>
<!-- end container -->
<!-- OCEAN PAGE CONTENT -->
<div class="container page-content ocean">
<img alt="Picture of ocean." width="100%" src="https://image.shutterstock.com/z/stock-photo-dark-blue-ocean-surface-seen-from-underwater-abstract-waves-underwater-and-rays-of-sunlight-582300589.jpg" />
</div>
<!-- end container -->
<!-- JQUERY JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
View on CodePen

So for the first part I think you need something like this:
$('.category-button').click(function(){
$('.category-button').removeClass('active')
$(this).addClass( "active" )
});
$(".category-button:eq(0)").addClass('active') // highlight the first button from the beginning
And the second part is much less code than you got initially. I added images fade in effect, I assume that was what you called filtering effect.
$('.page-content').hide().first().show() // first bubbles or whatever comes first
// Turn user's choice into a filter
var $categoryButton = $('.category-button');
var $pageContent = $('.page-content');
$categoryButton.on('click', function(e){
var $category = $(this).data('target');
$pageContent
.hide()
.find('img').hide()
.end() // get back to pagecontent from images
.filter("." + $category)
.show()
.find('img').fadeIn(); // hide all content and then show only filtered
});
The codepen
Actually the page you provided as example had that effect for only first time, I assume that is because images were loaded. On second, third etc click they were simply showing up.

How can I change the color of texts when they are moved to another div

I hope to make a draggable element more interactive by changing its color when it is in the drop field. But I haven't figured how to do that with the current code.
Here is my HTML:
<!-- Begin draggable area -->
<div class="draggable">
<div class="row">
<div class="col-md-12">
<h2 class="window-title">Spectra</h2>
</div>
</div>
<div class="row">
<div class="draggable-spectra"> <!--draggable element-->
<h3>Menu</h3>
<p class= "element">dasdsa</p>
</div>
<div class="draggable-spectra"><h3>Content</h3></div> <!--draggable element-->
</div>
</div>
<!-- End draggable -->
<!-- Begin Drop Area -->
<div class="droppable-spectra">
<h2 id="drop">Drop-box</h2>
</div>
<!-- end Drop Area -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="assets/js/drag.js"></script> <!--js file where I have the code below-->
Here is my code for JS (thanks to aSeptik):
$(function() {
$(".draggable-spectra").draggable({
revert : function(event, ui) {
// on older version of jQuery use "draggable"
// $(this).data("draggable")
// on 2.x versions of jQuery use "ui-draggable"
// $(this).data("ui-draggable")
$(this).data("uiDraggable").originalPosition = {
top : 0,
left : 0
};
// if (event === false){
// $(".element").data("color","blue")
// };
// return boolean
return !event;
// that evaluate like this:
// return event !== false ? false : true;
}
});
$(".droppable-spectra").droppable();});
Now it works like this (it is an example from aSeptik):
http://so.devilmaycode.it/revert-a-jquery-draggable-object-back-to-its-original-container-on-out-event-of-d/
But how could I change the text color in the draggable box when it is placed in the droppable box? I have tried .data() but it did not work. Any suggestions would be greatly appreciated. Thanks!

$('#element').droppable({
drop: callback,
greedy: true
});
I think you need to implement something like this.
http://api.jqueryui.com/droppable/

You can use the drop event callback of droppable widget as shown below:
$(".draggable-spectra").draggable();
$(".droppable-spectra").droppable({
drop: function(e, ui) {
ui.draggable.css('color', 'blue');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<!-- Begin draggable area -->
<div class="draggable">
<div class="row">
<div class="col-md-12">
<h2 class="window-title">Spectra</h2>
</div>
</div>
<div class="row">
<div class="draggable-spectra">
<!--draggable element-->
<h3>Menu</h3>
<p class="element">dasdsa</p>
</div>
<div class="draggable-spectra">
<h3>Content</h3>
</div>
<!--draggable element-->
</div>
</div>
<!-- End draggable -->
<!-- Begin Drop Area -->
<div class="droppable-spectra">
<h2 id="drop">Drop-box</h2>
</div>
<!-- end Drop Area -->

How do I get another value in this javascript code(imagepicker)?

I want to forward the user to other pages by letting them choose the appropriate image. There is a problem when the user chooses two images. I don't know how to set forwarding when the user chooses these 2 images, any ideas? Here's the tool that I used %windir%\Temp folder . Thanks you guys for help!
<html>
<head>
<!-- scripts for imagepicker -->
<link rel="stylesheet" href="assets/css/image-picker.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/image-picker.js"></script>
<script type="text/javascript">
"use strict";
//wait for the page to be fully loaded
window.onload = function() {
initialize();
}
</script>
<title></title>
</head>
<body>
<div class="container">
<br> <br> <br> <br>
<div class="jumbotron">
<!-- 2 obrazki -->
<div class="row">
<div class="col-xs-6 col-md-3"></div>
<center>
<select multiple="multiple" class="image-picker show-html" id="selectImg">
<div class="col-xs-6 col-md-3 flags container" >
<option class="col-xs-6 col-md-3 flags" data-img-src="assets/media/img/german.png" value="1"></option>
</div>
<div class="col-xs-6 col-md-3 flags container" >
<option class="col-xs-6 col-md-3 flags" data-img-src="assets/media/img/spain.png" value="2"></option>
</div>
</div>
</select>
</center>
<!-- 2 obrazki -->
</div>
<div class="form-group container">
<center>
<p>Kliknij tu i <br><a id="forwardButton" class="btn btn-lg btn-success" type="submit" href="#" role="button">Dołącz do Poliglotów</a></p>
</center>
</div>
</form>
</div>
</div>
<!--SCRIPTS imgpickr DON'T TOUCH-->
<script>
$("select").imagepicker();
function initialize() {
var choice; //= document.getElementById("selectImg").value;
//changes destination when you set or change your choice
document.getElementById("selectImg").onchange = function() {
choice = document.getElementById("selectImg").value;
}
//when button is clicked
document.getElementById("forwardButton").onclick = function() {
if(choice == 1){
window.location = "https://www.google.com";
}
else if(choice == 2){
window.location = "https://www.facebook.com";
}
else if(choice == 1 && choice == 2){
window.location = "https://www.twitter.com";
}
}
}
</script>
</body>
</html>

Look at this example answered before: How to get all selected values of a multiple select box using JavaScript?

Unable to use $.after() to close a div tag

This problem is best illustrated by example:
http://jsbin.com/lavonexuse
The desired effect is for clicking "Insert Row" to insert a full-width row after the indicated column (indicated by the class .insertion-point). The problem I'm running into is that instead of closing the current row first, and starting a new one, it just embeds a new row within the main row.
How do I close out the current row after any given column, make a new row, close that one, then resume showing the "data" columns?
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item insertion-point">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
</div>
</div>
<button class="btn btn-primary insert-row">Insert Row</button>
</body>
</html>
CSS:
.item {
border: 1px solid #f00;
}
.pane {
background: #999;
height: 100px;
}
JavaScript:
$('.insert-row').on('click', function() {
code = '</div><!--end row--><div class="row"><div class="col-sm-12 pane"></div></div>';
$('.insertion-point').after(code);
});
EDIT:
The code string above probably should end with <div class="row"> to re-open the row. But I tried that and it still doesn't work.
The problem here is that visually it looks like my solution works. Though in reality, it's creating bad HTML.
Further explanation (I think this is hard to explain). Here is what's happening, and this is NOT what I want:
I need that inserted row to be at the same level as the row it was erroneously inserted into.
Desired HTML after jQuery manipulation
<div class="container">
<div class="row">
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item insertion-point">
Data
</div>
</div>
<div class="row">
<div class="col-sm-12 pane"></div>
</div>
<div class="row">
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
</div>
</div>
Further Ramblings
Maybe, since this is Bootstrap, there's some way I can use the grid system to have the same effect.

The code below should resolve your issue. Check out the code snippet and demo:
$('.insert-row').on('click', function() {
var row = $('<div/>',{class:"row"}),
code = '<!--end row--><div class="row"><div class="col-sm-12 pane">New</div></div>',
rest = $('.insertion-point').nextAll(),
dest = $('.insertion-point').closest('.row');
dest.after( row.append( rest ) ).after( code );
});
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item insertion-point">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
</div>
</div>
<button class="btn btn-primary insert-row">Insert Row</button>

i worked out this four you: JsFiddle
$(document).ready(function() {
var firstRow = $('.row');
$('.insert-row').on('click', function() {
var code = $('<div/>', {clas: 'row'}).append($('<div/>', {class: "col-sm-12 pane"})),
row = $('<div/>', {class: 'row'}),
items = $('.insertion-point').nextAll();
row.append(items);
firstRow.after(row);
firstRow.after(code);
});
});
Update:
after seen the nextAll function by jQuery .. this will be much faster:
updated fiddle

I think what you need is appendTo which will append html onto the specified tag. In this case you want to append a div onto your row.
http://api.jquery.com/appendto/

Just get rid of the closing tag in the code variable and your code will work and be well formed
code = '</div><!--end row--><div class="row"><div class="col-sm-12 pane"></div></div>';
should be
code = '<div class="row"><div class="col-sm-12 pane"></div></div>';
Also you need to insert rows after / before other rows like so
$('.insert-row').on('click', function() {
code = '<div class="row"><div class="col-sm-12 pane"></div></div>';
$('.insertion-point').closest(".row").after(code);
});
The above code finds where you want to insert (which I changed to be an id selector since you want to insert after one unique element). However you want to find the closest parent element (or this one) that is a row so that you insert a row after that row. This way you can choose a row or a column to insert after and it will always insert a row after the closest row properly.
Lucky for you browsers are very forgiving when it comes to syntax errors in HTML. They will remove the initial closing tag (which is unnecessary) and use the rest of your HTML. But some browser may behave differently and that is what you have to be careful of.

You need to add a new row after the first by removing the elements after the insertion point and including them in the new row.
You can't treat the DOM like a text editor when inserting html.
$('.insert-row').on('click', function() {
var $insertEL=$('.insertion-point');
var code = '<div class="row"><div class="col-sm-12 pane"></div></div>';
/* create new row and append all siblings after insertion point element*/
var $newRow=$(code).append($insertEL.nextAll());
/* add new row to DOM*/
$insertEL.closest('.row').after($newRow);
});
DEMO

Got it!
Layout solved by using Bootstrap grid, very little jQuery DOM manipulation. I don't know why I didn't think of this earlier. Sheesh. I've been coding for hours non-stop, my brain is fried.
Solution: http://jsbin.com/zopiquzore
This is correct, yes?