Develop Reference

Hide content when clicking outside div with jquery

I'm using jquery to togle content with a button, I would like to hide the content when I click outside my "contentcone" div. The HTML is the following
<div class="togglecone">
</div>
<div class="contentcone">
<div class="contentleft">
<div class="title">
Cone
</div>
<div class="maincopy">
Hello my friends this is a really nice cone that can be placed anywhere
</div>
<a href="https://www.mcnicholas.co.uk/" class="button">
View on website
</a>
</div>
<div class="contentright"> <img src="images/cone.png" alt=""/>
</div>
</div>
This is the script
$(document).ready(function(){
var $content = $(".contentcone").hide();
$(".togglecone").on("click", function(e){
$(this).toggleClass("expandedcone");
$content.slideToggle();
});
});
http://jsfiddle.net/thomastalavera/SCKhf/914/

This should do it:
$(document).ready(function(){
var $content = $(".contentcone").hide();
$(document).on("click", function(e) {
if( $(e.target).is(".togglecone") ) {
$(this).toggleClass("expandedcone");
$content.slideToggle();
} else {
$content.slideUp();
}
});
});
DEMO

You need to set a click event on document to close the box. I tried to keep your original click function intact.
$(document).ready(function(){
var $content = $(".contentcone").hide();
$(".togglecone").on("click", function(e){
$(this).addClass("expandedcone");
$content.slideDown();
});
$(this).on('click', function(e) {
if ($(e.target).is('.togglecone')) { // don't slide up if you click the cone
return;
}
if ($(".togglecone").hasClass('expandedcone')) {
$content.slideUp();
$(this).removeClass("expandedcone");
}
});
});
http://jsfiddle.net/SCKhf/925/

A simple and pretty blunt way to do this is:
$(document).ready(function(){
var $content = $(".contentcone").hide();
$(".togglecone").on("click", function(e){
e.stopImmediatePropagation();
$(this).toggleClass("expandedcone");
$content.slideToggle();
});
$("body").on("click", function(e){
if ($(".contentcone").is(':visible')) {
$(".togglecone").click();
}
});
$(".contentcone").on("click", function(e){
e.stopImmediatePropagation();
return false;
})
});
But note it has a lot of disadvantages, is just a blunt solution to your problem, it must be tweaked to be ok as a permanent choice.
Edit (to answer the question in comment):
Sure, I know more than 1, each depending on your layout. You can:
a) Instead of the "body" part, make a selector for whatever elements you want to toggle event one. This works ok on layouts with a small number of big (as size on screen) elements.
b) Add one more condition to the "body" part, where you get mouse position and use it to see if the mouse is in the place you want. You can do this with e.pageX/e.pageY, or you can find relevant relative position to an element here jQuery get mouse position within an element.

This should do it with lesser code:
$(document).mousedown(function (e) {
var container = $(".togglecone");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.fadeOut('slow');
}
});

How to fade in closest image?

I tried writing a small script to Fadein the closest image using jQuery but for some reasons this code is not working. Can anyone help me with the syntax? Thanks
$( ".delimg" ).click(function() {
$(this).closest( "img" ).fadeTo( "slow" , 0.5, function() {
$("input[type='button']").toggle(
function(){
$(this).val("Undelete");
},
function(){
$(this).val("Delete");
}
);
});
});
HTML
<div class="swiper-slide">
<img src="http://20percents.com/backend/uploads/C0d49a7de7b635477125ffffa8df7b931.jpg" class="swipe-image">
<center><input type="button" class="delimg" value="Delete"></center>
</div>
<div class="swiper-slide">
<img src="http://20percents.com/backend/uploads/C0d49a7de7b635477125ffffa8df7b932.jpg" class="swipe-image">
<center><input type="button" class="delimg" value="Delete"></center>
</div>
Fiddle: http://jsfiddle.net/e27r8/597/

The img element is not a direct parent of the button which is clicked. You need to use closest to get the containing div, then search for the image within that. Try this:
$(".delimg").click(function () {
$(this).closest(".swiper-slide").find('img').fadeTo("slow", 0.5);
});
Updated fiddle
Also, note that toggle can no longer be used in the manner you are. It will only show/hide elements now, not run specific functions on successive clicks.
To change the text of the button as required, you can pass a function to val() like this:
$(".delimg").click(function () {
var $button = $(this);
$button.closest(".swiper-slide").find('img').fadeTo("slow", 0.5, function() {
$button.val(function(i, value) {
return value == "Delete" ? "Undelete" : "Delete";
});
});
});
Example fiddle

As img is not parent of input so,you have to do this way:
$(this).closest(".swiper-slide").find("img")
You have to get parent div with class swiper-slide and then get img from inside it.

It's not an ancestor, so you need to traverse -
$(this).closest( ".swiper-slide" ).find("img").fadeTo( "slow" , 0.5, function() {

you should go up one level, and then find
$(...).parent().find(...);
$( ".delimg" ).click(function() {
$(this).parent().find( "img" ).fadeTo( "slow" , 0.5, function() {
$("input[type='button']").toggle(
function(){
$(this).val("Undelete");
},
function(){
$(this).val("Delete");
}
);
});
});
edit
i missed <center> tag
use .parent().parent()

How to attr one link to multiple elements?

I am not really sure if the title points to my question but:
I would like to show two different elements(contents and images) at the same time with one link.. It s kinda content and image slider so if you click link1 attr content1 and image1, if you click on link2 attr content2 and image2 and so on..
That way I can attract boxes but how would I call images too?
$(".box").hide();
$(".box:first").show();
$("a").click(function() {
var activeLink = $(this).attr("href");
$("a").removeClass("active");
$(".box").hide();
$(activeLink).slideDown("normal");
return false;
});
I have come so far..
http://jsfiddle.net/2GR3W/2/
Thnx in advance!

Try:
$(document).ready(function () {
// Text Box
$(".box, .img").hide();
$(".box:first,.img:first").show();
$("a").click(function (e) {
var idx=$(this).index();
e.preventDefault();
var activeLink = $(this).attr("href");
$("a").removeClass("active");
$(".box, .img").hide();
$('.container div').eq(idx).slideDown("normal");
$('.container img').eq(idx).slideDown("normal");
});
});
jsFiddle example

Try refactoring your image ID references to follow a convention named after your link href values.
<img id="box3-img" class="img" src="asd.jpg" width="300" height="200" alt="img3"/>
Then you can treat the 'href' attr value as a mere prefix against the ID for the images:
$(activeLink + "-img").show();
http://jsfiddle.net/2GR3W/5/

My solution for you is:
$(document).ready(function() {
$('.links').on('click','a',function() {
if(!$(this).hasClass('active')){
$('.links a').removeClass('active')
$(this).addClass('active');
$('.container').find('.box, img').hide();
$('.container').find('.box').eq($(this).index()).slideDown('normal');
$('.container').find('img').eq($(this).index()).fadeIn('normal');
}
});
});
$(window).load(function(){
$('.links').find('a:nth-child(1)').trigger('click');
});
Fiddle:
http://jsfiddle.net/2GR3W/7/
With this code you can put infinites <a/>, <div class="box"/> and <img/>, it will always find the .box and the img in the same 'order' and show it

Append <div> with click and remove with click

I have the following problem:
I append the div:
$(".class").click(function() {
$(this).append("<div class='click'></div>");
$("div.click").show();
});
Then i remove it with a click on another button but the div is still there.
$(".button").on("click", function(e){
e.preventDefault();
...
$("div.click").hide();
});

Try keeping a pointer to the div the following should work.
var tempDiv;
$(".class").click(function() {
tempDiv = $("<div class='click'></div>").appendTo($(this)).show();
});
$(".button").on("click", function(e){
e.preventDefault();
tempDiv.remove();
});
Otherwise you can use this way
$(".class").click(function() {
$("<div class='click'></div>").appendTo($(this)).show();
});
$(".button").on("click", function(e){
e.preventDefault();
$('.click').remove();
});
PS: You may also remove the .show() if the .click class is not hidden by default

Try this
You have two buttons.
Say:
<div class="Main">
<div>Div0</div>
</div>
<button class="button1">Click to add</button>
<button class="button2">Click to remove</button>
and JS Code is :
var counter=1;
$(".button1").click(function() {
$('.Main').append("<div class='click'> newly added Div "+counter+"</div>");
counter++;
$("div .click").show();
});
$(".button2").click(function() {
$('.Main div').remove(':last-child');
});

Here is an example based on your work : http://jsfiddle.net/UQTY2/128/
<div class="class">Click to add a green box</div>
<button class="button">Click to remove all green boxes</button>
$(".class").click(function() {
$(this).append("<div class='click'></div>");
});
$(".button").click(function(e) {
e.preventDefault();
$("div.click").remove();
});

this will remove
$(".button").on("click", function (e) {
e.preventDefault();
$("div.click").remove();
});
check my fiddle
http://jsfiddle.net/suhailvs/4VmYP/2/

When you dynamicly create element, you need delegated-event: .on( event, selector, handler(eventObject) ).
$(document).on("click", ".button", function(e){
e.preventDefault();
...
$("div.click").hide();
});
If you want remove element, you shoud use .remove() method instead of .hide().

you can dynamically add and remove div with javaScript like this
Check this example
Add and Remove Div dynamically
in this example the default remove button remove the most recent added div or you can say the last div in the container
But if you want to remove particular div with div place number you can enter the div number .
Code example
HTML
<div class="Main">
<div>div1</div>
</div>
<button id="ok">add</button>
<button id="del">remove</button>
<label>Enter div number to remove</label>
<input id="V"/>
<button id="Vok">ok</button>
JS
var counter=0;
$("#ok").click(function(){
$('.Main').append('<div> new div'+counter+'</div>');
counter++;
})
$("#del").click(function(){
$('.Main div').remove(':last-child');
})
$("#Vok").click(function(){
var Val=$('#V').val();
$('.Main div:nth-child('+Val+')').remove();
})

remove "on" from
$(".button").on("click", function(e){
e.preventDefault();
...
$("div.click").hide();
});

How to hide my dynamicly created divs?

I have created a script that creates divs based on number of li elements and that part is working fine. Now what I would like to do is to hide these div's (dynamicly created) but it is not working. Can someone tell me what I am doing wrong here? THX!!
Fiddle here
My code:
$(document).ready(function(){
$(".create").click(function(){
i='';
var count = $("li").length;
for(var i=0;i<count;i++){
$('<div class="mydiv" style="width:100px;height:100px;background-color:red;border:1px solid #000000;"></div>').appendTo('body');
}
});
$('.check').click(function(){
var getDivs= $('div').length;
alert(getDivs);
});
//Why is this not working?
$('div').click(function(){
$(this).hide();
});
});

Try to do this instead (and attach the click event when you create the div):
$('<div class="mydiv" style="width:100px;height:100px;background-color:red;border:1px solid #000000;"></div>')
.click(function(){
$(this).hide();
})
.appendTo('body');

All of this code should be in jQuery ready. The problem is your events are being bound before the elements have been created.
$(document).ready(function(){
$(".create").click(function(){
i='';
var count = $("li").length;
for(var i=0;i<count;i++){
$('<div class="mydiv" style="width:100px;height:100px;background-color:red;border:1px solid #000000;"></div>').appendTo('body');
}
$('.check').click(function(){
var getDivs= $('div').length;
alert(getDivs);
});
//Now working
$('div').click(function(){
$(this).hide();
});
});
});

Try
$(document).on('click', 'div', function () {
$(this).hide();
)};