Develop Reference

jQuery: How do I get a cloned div to always appear at the bottom of the container?

New to coding...
I'm trying to get divs to clone and end up in the section container on click. However, I want their order to be as they were clicked, not their position in the html.
For example, in the code below, click "show div 2" then "show div 1", note how "div1" goes above "div2" even though "show div 2" was clicked first.
My question is, how do I make the cloned div's position relative to the order it was clicked?
$(document).ready(function() {
$("#showdiv1").click(function() {
$("section").append($("#div1").clone(true));
$("#div1").fadeIn("500");
$("#hidediv1").fadeIn("500");
});
});
$("#hidediv2").click(function() {
$(this).closest("#div2").fadeOut("500");
});
$(document).ready(function() {
$("#showdiv2").click(function() {
$("section").append($("#div2").clone(true));
$("#div2").fadeIn("500");
$("#hidediv2").fadeIn("500");
});
});
$("#hidediv2").click(function() {
$(this).closest("#div2").fadeOut("500");
});
div {
display: none;
}
#showdiv1, #div1 {
background-color:salmon;
}
#showdiv2, #div2 {
background-color:lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<section>
<a class="button" id="showdiv1">Clone Div 1</a>
<a class="button" id="showdiv2">Clone Div 2</a>
<div id="div1">div 1 content<a id="hidediv1"> Hide Div</a></div>
<div id="div2">div 2 content<a id="hidediv2"> Hide Div</a></div>
</section>

$(document).ready(function() {
$("#showdiv1").click(function() {
$(".div1").first().clone(true).appendTo("section").fadeIn("500");
});
$("#showdiv2").click(function() {
$(".div2").first().clone(true).appendTo("section").fadeIn("500");
});
$(".hide").click(function() {
$(this).closest("div").fadeOut("500").remove();
});
});
div {
display: none;
}
#showdiv1, .div1 {
background-color:salmon;
}
#showdiv2, .div2 {
background-color:lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<section>
<a class="button" id="showdiv1">Clone Div 1</a>
<a class="button" id="showdiv2">Clone Div 2</a>
<div class="div1">div 1 content<a class="hide"> Hide Div</a></div>
<div class="div2">div 2 content<a class="hide"> Hide Div</a></div>
</section>
I think the issue is that you are using id selectors and attributes when you should really be using classes. The second click on the 'showdiv1' link is showing the hidden div you are cloning from as it is the first found with the id attribute. I've updated the snippet. So I'm cloning the first div found with a certain class, appending it to the container and then showing. Also moved the other hide on click delegate inside the doc ready function so that works now too.

You can use insertAfter and attribute selector like [id=div1] instead of #div1.
$(document).ready(function() {
$("#showdiv1").click(function() {
if ($("section [id=div1]").length > 1) {
$("#div1").clone(true).insertAfter($("section [id=div1]:last"));
} else {
$("section").append($("#div1").clone(true));
}
$("[id=div1]:not(:first)").fadeIn("500");
$("[id=hidediv1]:not(:first)").fadeIn("500");
});
});
$("#hidediv2").click(function() {
$(this).closest("#div2").fadeOut("500");
});
$(document).ready(function() {
$("#showdiv2").click(function() {
if ($("section [id=div2]").length > 1) {
$("#div2").clone(true).insertAfter($("section [id=div2]:last"));
} else {
$("section").append($("#div2").clone(true));
}
$("[id=div2]:not(:first)").fadeIn("500");
$("[id=hidediv2]:not(:first)").fadeIn("500");
});
});
div {
display: none;
}
#showdiv1,
#div1 {
background-color: salmon;
}
#showdiv2,
#div2 {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<section>
<a class="button" id="showdiv1">Clone Div 1</a>
<a class="button" id="showdiv2">Clone Div 2</a>
<div id="div1">div 1 content<a id="hidediv1"> Hide Div</a></div>
<div id="div2">div 2 content<a id="hidediv2"> Hide Div</a></div>
</section>

Trying to get jQuery to change a different img src when clicked

I've got 2 seperate divs that change background img src when clicked which works fine, but I would like it to change the other image its present with. E.g. div 1 is pressed and becomes "open", if div2 is "open" it then becomes closed. My jQuery is rather limited and have it functioning where it can change the image, but need to figure out how to apply the "closed" class to images that haven't just been clicked. Ideally it would use the attr() so I can add more later.
jQuery
$(".box").on("click", function() {
// need to make this function select the other div.
if ($(this).hasClass("closed")) {
$(this).addClass("open").removeClass("closed");
} else {
$(this).addClass("closed").removeClass("open");
}
var id = $(this).attr("data-id");
$(this).toggleClass("open");
$(".hideDivs").hide();
$("#" + id).show();
});
.container {
width: 640px;
height: 450px;
background-color: #eee;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.text-primary {
font-size: 14px;
text-align: center;
margin-bottom: 5px;
}
.box {
cursor: pointer;
width: 90px;
height: 180px;
display:block;
margin:auto;
background-image: url("http://res.cloudinary.com/dez1tdup3/image/upload/v1499052120/closed_vo1pn2.png");
}
.open {
background-image: url("http://res.cloudinary.com/dez1tdup3/image/upload/v1499052120/open_ihcmuz.png");
}
.closed {
background-image: url("http://res.cloudinary.com/dez1tdup3/image/upload/v1499052120/closed_vo1pn2.png");
}
.hideDivs {
display: none;
}
.panel-body {
padding: 10px;
margin-top: 5px;
}
.title {
font-weight: bold;
font-size: 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="box" data-id="divId1">
</div>
</div>
<div class="col-xs-6">
<div class="box" data-id="divId2">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="panel panel-default hideDivs" id="divId1">
<div class="panel-body">
<span class="title">Practices for safe packaging of cooked foods</span>
<ul>
<li>Label and date all food.</li>
<li>Package high-risk food in small batches for refrigeration and return to refrigerated storage as soon as possible (within 20 minutes).</li>
<li>Store packaging products in a clean environment and protect from contamination.</li>
</ul>
</div>
</div>
<div class="panel panel-default hideDivs" id="divId2">
<div class="panel-body">
<span class="title">Practices for safe freezing of cooked foods</span>
<ul>
<li>When packaging food for freezing, cover or wrap, label and date (production and freezing date) all foods.</li>
<li>Freeze food in small quantities to ensure food is frozen quickly.</li>
<li>Do not overload freezer units and ensure air can circulate.</li>
<li>Do not freeze foods that have been cooked then refrigerated and reheated.</li>
</ul>
</div>
</div>
</div>
</div>
</div>

Please check the jsfiddle and let me know if you are looking something like this.
https://jsfiddle.net/314sybno/2/
$(".box").on("click", function() {
var id = $(this).attr("data-id");
if( id === 'divId1') {
$('div[data-id="divId2"]').addClass('closed').removeClass('open');
} else {
$('div[data-id="divId1"]').addClass('closed').removeClass('open');
}
// need to make this function select the other div.
if ($(this).hasClass("closed")) {
$(this).addClass("open").removeClass("closed");
} else {
$(this).addClass("closed").removeClass("open");
}
$(".hideDivs").hide();
$("#" + id).show();
});

This might be a better approach:
$(".box").on("click", function() {
// Hide all detail divs
$(".hideDivs").hide();
if ($(this).is(".closed")) {
// Close other open boxes
$(".box.open").removeClass("open").addClass("closed");
// Open this box and show the corresponding details div
$(this).removeClass("closed").addClass("open");
var id = $(this).attr("data-id");
$("#" + id).show();
} else {
// Close this box
$(this).removeClass("open").addClass("closed");
}
});
Also, I would recommend changing your HTML to have your 'box' elements also have a 'closed' class, so you do not repeat/need the CSS background attribute on the 'box' class.
See it working on this fiddle

Check to see of current clicked element equals to previous clicked element-Javascript

I have a list of items displayed in a container with a dropdown associated with every container.A snippet of how the container list looks:
http://jsfiddle.net/jHpKB/2/
When I click on the button , the dropdown menu shows up, however, when I try to click on any other button button, the dd stays and does not hide. the list is dynamically created. What I was trying to do is if the current clicked element is same as that of the previous clicked elemnt, then hide the first dd menu
Is there way to check if a clicked element is equal to the previous clicked element in javascript(no jquery)
code:
afterRender: function() {
this.el.on('click', function(e) {
//here i want to check (if e.getTarget() === secondClickedEment) { //do something}
},this);
}
is this possible?
Thanks

You can test object equality with jQuery using the is function. Requires 1.6 or higher.
var stuff = $('#stuff');
var thing = stuff;
if (stuff.is(thing)) {
// the same
}
So for your situation this should work:
afterRender: function() {
this.el.on('click', function(e) {
var clickedElm = $(e.getTarget());
var secondElm = $(secondClickedElm);
if (clickedElm.is(secondElm)){
// same elements
}
},this);
}

jQuery example:
use var lastClicked; to hold the last clicked element, then each click check if the same one clicked then reset the lastclicked, otherwise update the lastclicked.
var lastClicked;
$('.container').on('click', function(e) {
if (this == lastClicked) {
lastClicked = '';
$(this).children('.menu').hide();
} else {
lastClicked = this;
$('.menu').hide();
$(this).children('.menu').show();
}
});
.container {
border: 1px solid #333;
height: 300px;
width: 200px;
float: right;
margin-right: 20px;
}
.menu {
display: none;
}
.button {
border: 1px solid #333;
background: #333;
float: right;
height: 20px;
width: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="button">
</div>
<div class="menu">
<div class="option1 option">option1</div>
<div class="option2 option">option2</div>
</div>
</div>
<div class="container">
<div class="button">
</div>
<div class="menu">
<div class="option1 option">option1</div>
<div class="option2 option">option2</div>
</div>
</div>
<div class="container">
<div class="button">
</div>
<div class="menu">
<div class="option1 option">option1</div>
<div class="option2 option">option2</div>
</div>
</div>

One way to do this would be to dynamically add/remove a class to the div, indicating if it's open or not. Then on click, you could just toggle that class.
Example:
let containers = document.getElementsByClassName('container');
for (let i=0; i<containers.length; i++) {
let button = containers.item(i).getElementsByClassName('button')[0];
let menu = containers.item(i).getElementsByClassName('menu' )[0];
button.addEventListener('click', function() {
menu.classList.toggle('open');
});
}
Then in your CSS:
.open {
display: block;
}

Let a link become "active" without class add/remove

Is it possible to change a link to "active" without add/removing a class? The problem i´ve got is, that my other script will not work if the "a"-tag will be changed for example to "a.active".
So this way works for the link, but not for my other script ;(, because a class will be add and remove.
<script>
$(function(){
$('.mydiv a').click(function(){
$('.mydiv .active').removeClass('active');
$(this).addClass('active');
});
});
</script>
Can anybody help me?
UPDATE 2
Thats the script I work with:
http://jsfiddle.net/7n2d4b44/2/

Use data-* attributes to hold data, don't use class names as data. You can use the jQuery .data method to get the value of a data-* attribute.
var sliding = $('.sliding_div');
var divWords = $('.sliding_div p');
$('.links a').click(function () {
//pass .data the name after the `data-` part in the attribute name
var c = '.' + $(this).data("filter"); // get name to filter classes and make it as a CSS selector
divWords.hide().filter(c).show(); // hide all words,
// filter to get the ones with class like the clicked link
// show the filtered ones
//You could move this to its own handler
//$(".links a.close).click(...)
c === '.close' ? sliding.hide() : sliding.show();
// if c is .close show the sliding_div else hide it
$(".links .active").removeClass("active");
$(this).addClass("active");
});
.links {
width: 60px;
float: left;
}
.sliding_div {
padding:10px;
width: 200px;
float: right;
background-color:#ccc;
display:none;
}
.sliding_div div {
display:none;
}
.active{
color:#F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="links">
<a href="#" data-filter='one'>Link 1</a>
<a href="#" data-filter='two'>Link 2</a>
<a href="#" data-filter='three'>Link 3</a>
<a href="#" data-filter='close'>Close</a>
</div>
<div class="sliding_div">
<p class='one two three'>House</p>
<p class='one two three'>Cat</p>
<p class='one'>Dog</p>
<p class='three'>Car</p>
<p class='one two'>Man</p>
</div>

You could use the CSS pseudo-class I think like:
a:active { color: lime }
More info CSS :active pseudo-class

The $(this).addClass('active'); should append so the element should have 2 classes. The other class should not be removed. You can double check.
In your case, it could be that your function to access the other class is not coded correctly

I made a few changes, but you should now be able to add your code to use the active class, without worrying about this bit...
css
.links {
width: 60px;
float: left;
}
.sliding_div {
padding:10px;
width: 200px;
float: right;
background-color:#ccc;
}
.sliding_div p {
display:none;
}
html
<div class="links">
<a href="#" data-link='one'>Link 1</a>
<a href="#" data-link='two'>Link 2</a>
<a href="#" data-link='three'>Link 3</a>
Close
</div>
<div class="sliding_div">
<p class='one two three'>House</p>
<p class='one two three'>Cat</p>
<p class='one'>Dog</p>
<p class='three'>Car</p>
<p class='one two'>Man</p>
</div>
Javascript
var sliding = $(".sliding_div");
var divWords = $(".sliding_div p");
$(".links a").click(function (e) {
e.preventDefault();
divWords.hide();
sliding.find("." + $(this).data("link")).show();
});
jsfiddle example...
http://jsfiddle.net/7n2d4b44/7/

link to div in a separate tab

I am trying to link to a div that is in a separate tab. Currently the side navigation link is like this:
var loc = window.location.hash;
if (loc == "#bargain") {
jQuery('.tab-2').click();
App.SetBaseLine();
jQuery('#bargain').addClass('activeListColor');
};
<li>Bargain Packages</li>
<!-- start of tabHolder -->
<div id="tabHolder">
<ul class="tabs_new buttons">
<li class="liOuter" id="tab1">Buyers' Guide</li>
<li class="liInner" id="tab2">Pricing Guide</li>
</ul>
Unfortunately, this does not take me under the second tab. I am trying to have a user click the link, and it opens the tab and anchors down to the div location.
I am open to suggestions.

You can do this way:
<ul class="tab">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div class="tabs">
<div id="tab1">Content 1</div>
<div id="tab2">Something here</div>
<div id="tab3">Omg! Three</div>
</div>
And the script as:
$(document).ready(function(){
$(".tab > li > a").click(function(){
var tab = $(this).attr('href');
$(".tab > li > a").removeAttr("style");
$(this).css("background-color", "#ccc");
$('.tabs > div:visible').hide(function(){
$(tab).show();
});
return false;
});
$('.tabs > div').hide();
$('.tabs > div:first-child').show();
});
CSS:
body {overflow: hidden;}
ul li {display: inline-block; *display: inline; *zoom: 1;}
a {text-decoration: none; color: #f60; border-radius: 5px; padding: 5px; display: inline-block; *display: inline; *zoom: 1;}
div {padding: 5px;}
Fiddle! Hope this is a best way to use tabs. :)

You can use the following jQuery to achieve a 'tab' like effect
​$('a').click(function() {
$('div').hide();
var destination = '#' + $(this).attr('data-tab');
$(destination).toggle();
});​
See this live example
Here is an updated example with the divs wrapped in an unordered list
Alternatively, you can use a 'current' class and toggle that on click using the following code:
$('a').click(function() {
$('.tabs div').removeClass('current');
var destination = '#' + $(this).attr('data-tab');
$(destination).toggleClass('current');
});​
Another live example here