We Keep Coding

How toggle multiple element with one .toggle()

I know this question is kind of weird but i am not able to find out this
For Example : there is some div with ids
HTML
<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>
<div id="test4">test 4</div>
<div id="test5">test 5</div>
<div id="test6">test 6</div>
and i want to toggle some specific div
like
test1, test4 and test6
so i have to do like this
$('#test1').toggle();
$('#test4').toggle();
$('#test6').toggle();
but i want to know is there any way to do that like
$('#test1', '#test4', '#test6').toggle();
I know it can be done if i just give same class on the div which i want to toggle.
but i want to know this for that reason i asked

Sure you can, simply comma separate your ID selector:
$('#test1, #test4, #test6').toggle();
$("#toggle").on("click", function(){
$('#test1, #test4, #test6').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">TOGGLE 1, 4, 6</button>
<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>
<div id="test4">test 4</div>
<div id="test5">test 5</div>
<div id="test6">test 6</div>
A much reusable code would allow you to toggle any desired elements without copy/pasting your JavaScript functions.
Here's an example where the desired selector to toggle is stored within the data-toggle attribute of the action element:
$("[data-toggle]").on("click", function(){
$(this.dataset.toggle).toggle();
});
.hidden{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-toggle="#test1,#test6">Toggle 1, 6</button>
<button data-toggle="#test3,#test4">Toggle 3, 4</button>
<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>
<div id="test4">test 4</div>
<div id="test5">test 5</div>
<div id="test6">test 6</div>
<button data-toggle=".info">Toggle .info</button>
This is some
<span class="info">OLD</span>
<span class="info hidden">NEW!!!</span>
info

Hide Parent Div if nested div is empty

I'm trying to hide the outer div when a nested div is empty (including white-space node). I've found a solution that works if there is NO whitespace:
Hide parent DIV if <li> is Empty
I need it to work when there IS white space present, ie:
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 1</div>
<div class="content">
<div class="product"> </div>
</div>
</div>
</div>
Example fiddle

Working fiddle
You could use the both :empty and :contain() selector :
$("div.product:contains(' '), div.product:empty").closest('div.wrapper').hide();
Hope this helps.
$("div.product:contains(' '), div.product:empty").closest('div.wrapper').hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 1</div>
<div class="content">
<div class="product"> </div>
</div>
</div>
</div>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Visible if working 2</div>
<div class="content">
<div class="product">text</div>
</div>
</div>
</div>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 3</div>
<div class="content">
<div class="product"></div>
</div>
</div>
</div>

You can iterate over each div.product and trim the text to remove whitespace. If there's anything left, show it, otherwise, hide its wrapper.
$("div.product").each(function() {
if ($(this).text().trim() == '') {
$(this).closest('div.wrapper').hide()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 1</div>
<div class="content">
<div class="product"></div>
</div>
</div>
</div>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Visible if working 2</div>
<div class="content">
<div class="product">text</div>
</div>
</div>
</div>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 3</div>
<div class="content">
<div class="product"></div>
</div>
</div>
</div>

//Try this using Jquery
<script>
//A perfect reference in Jquery...
var element=$('#target_child');
if($(element).html()==''){
$(element).parent().hide()
}else{
//do some work
}
</script>

How to scroll down to bottom child div using jquery

I have following div structure.
<div id="conversation" class="list-view">
<div class="conv">
<div class="msg">Hi 1</div>
<div class="msg">Hi 2</div>
<div class="msg">Hi 3</div>
<div class="msg">Hi 4</div>
<div class="msg">Hi 5</div>
<div class="msg">Hi 6</div>
<div class="msg">Hi 7</div>
<div class="msg">Hi 8</div>
<div class="msg">Hi 9</div>
<div class="msg">Hi 10</div>
</div>
</div>
Now when i add on ajax submit button new div <div class="msg">Hi 11</div> added at the end of <div class="conv">. i want to scroll down to the bottom new added div.
i have used following but it doesn't work.
$('.conv ').animate({scrollTop: $('.conv')[0].scrollHeight}, 'slow');
$('.conv').scrollTop($('.conv')[0].scrollHeight);
How to scroll down to bottom child div. Position of parent div is fixed.

You will need to fix the height of .conv if you want to scroll that. Else, use scroll on the body.
Demo: http://jsfiddle.net/GCu2D/775/
JS:
$(document).ready(function () {
$('.conv ').animate({
scrollTop: $('.conv .msg:last-child').position().top
}, 'slow');
});
CSS:
.conv {
max-height:100px; //for demo
overflow:auto;
}

You can use the following code as:
$('.conv').animate({scrollTop: $('.conv div.msg:last').offset().top});
For the demo : http://jsfiddle.net/GCu2D/776/

How do I handle repetitive / iterative fadeouts of similar class divs in jQuery?

I have 6 divs on a page, each has a layer on top that will fadeout on hover, and fade back in on mouseleave. What I have now is this, but the stack overruns if I do it for individual div layers. How do I assign the functionality to all six top layers in a single code block?Thanks for any clues!
JSFIddle here
<script>
$(function(){
$(".hover6").mouseenter(function() {
$(this).siblings().fadeIn();
$(this).fadeOut();
});
$("#div6").mouseleave(function() {
$(".hover6").fadeIn('slow');
});
$(this).siblings().fadeOut();
})
</script>
<script>
$(function(){
$(".hover5").mouseenter(function() {
$(this).siblings().fadeIn();
$(this).fadeOut();
});
$("#div5").mouseleave(function() {
$(".hover5").fadeIn('slow');
});
$(this).siblings().fadeOut();
})
</script>
//and so on - identical script for other 4 divs

Use common class then you can use class selector to bind events.
HTML
<div id="div1" class="divContainer">
<div class='hover hover1'>Overlay on top</div>
<div>subdiv in div 1</div>
<div>subdiv in div 1</div>
</div>
Script
//Bind event using common class
$(".hover").mouseenter(function () {
$(this).siblings().fadeIn();
$(this).fadeOut();
});
$(".divContainer").mouseleave(function () {
//Use find
var hoverElem = $(this).find(".hover");
hoverElem.fadeIn('slow');
hoverElem.siblings().fadeOut();
});
DEMO

<div class="wrapper">
<div id="div1" class="mouse-enter">
<div>Overlay on top</div>
<div>subdiv in div 1</div>
<div>subdiv in div 1</div>
</div>
<div id="div2" class="mouse-enter">
<p class="auto-style1">This is div2</p>
<div>Overlay on top</div>
<div>subdiv in div 2</div>
<div>subdiv in div 2</div>
</div>
<div id="div3" class="mouse-enter">
<div>Overlay on top</div>
<div>subdiv in div 3</div>
<div>subdiv in div 3</div>
</div>
<div id="div4" class="mouse-enter">
<div>Overlay on top</div>
<div>subdiv in div 4</div>
<div>subdiv in div 4</div>
</div>
<div id="div5" class="mouse-enter">
<div>Overlay on top</div>
<div>subdiv in div 5</div>
<div>subdiv in div 5</div>
</div>
<div id="div6" class="mouse-enter">
<div>Overlay on top</div>
<div>subdiv in div 6</div>
<div>subdiv in div 6</div>
</div>
</div>
$('.mouse-enter').click(
function(){
$(this).animate({'width': '100%', 'height':'100%'},600).siblings().animate({'width':'0','height':'0'},600);
$('<button class="show">XClose</button>')
.appendTo ('.wrapper');
});
$(document).on('click','.show', function() {
$(this).animate({
'width': '0',
'height': '0'
}, 600).siblings().animate({
'width': '50%',
'height': '33.33%'
}, 600);
$(this).remove();
});

Select and wrap two divs with jquery

I am trying to wrap divs in a 'row' wrapper, so that there are two divs in each.
My code looks like this:
<div id="content" class="center cutepicscontainer cf">
<div class="product cf">product 1</div>
<div class="product cf">product 2</div>
<div class="product cf">product 3</div>
<div class="product cf">product 4</div>
</div>
And I would like my products to be sorted like this:
<div id="content" class="center cutepicscontainer cf">
<div class="row">
<div class="product cf">product 1</div>
<div class="product cf">product 2</div>
</div>
<div class="row">
<div class="product cf">product 3</div>
<div class="product cf">product 4</div>
</div>
</div>
I searched and found a piece of jquery code, but this doesn't work exactly like I want.
$('.cutepicscontainer .product').each(function(){
$(this).next().andSelf().wrapAll('<div class="row"/>');
});
This is the outcome : http://i.imgur.com/Jx0r3NO.png
Thanks in advance!
Victor
EDIT added .product:even, now it works!

$('.cutepicscontainer .product:even').each(function(){
$(this).next().andSelf().wrapAll('<div class="row cf"/>');
});
This works!