Develop Reference

Place content from a clicked element into another element

Hi I am looking to place content from a child element into another element.
I have a hidden div called "DetailsExpanded" and a series of items called "IconWrapper". On clicking "IconWrapper" I would like to copy the content from that items "ItemDetail" Into "DetailsExpanded" and slide down "DetailsExpanded" with said content
Please see below my html structure.
I have begin on the sliding js but I am a bit out of my depth unfortunately.
$( ".IconWrapper" ).click(function () {
if ( $( ".DetailsExpanded" ).is( ":hidden" ) ) {
$( ".DetailsExpanded" ).slideDown( "fast" );
} else {
$( ".DetailsExpanded" ).hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DetailsExpanded"></div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy</div>
<div class="Icon icon-icons-d-steps"></div>
</div>

All you have to do is to take the .html() of the clicked element and to set it in your .DetailsExpanded element :
$(".IconWrapper").on("click", function() {
var content = $(this).find(".ItemDetail").html();
$(".DetailsExpanded").html(content);
$(".DetailsExpanded").slideToggle("fast"); // this replaces slideDown or hide
});

$( ".IconWrapper" ).click(function () {
var text = $(this).find('.ItemDetail').text();
$( ".DetailsExpanded" ).html(text).slideDown( "slow" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DetailsExpanded"></div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy1</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy2</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy3</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
Is this what you are looking for ?

$(document).ready(function(){
$('.IconWrapper').on('click', function(e) {
$(".DetailsExpanded").text($(this).text()).slideDown();
});
});

using $(this) properly in jquery

$(".gear_listing").hover(function(){
$(".overlay_gears").show();
},function(){
$(".overlay_gears").hide();
}
);
above is my jquery code,as u can imagine i am trying to show .overlay_gears div when .gear_listing div is hover,the above code works just fine.the problem is i have many number of .gear_listing divs and many number of .overlay_gears div,when i hover on any div called .gear_listing all the .overlay_gears div is shown which i dont want.i just want to show the .overlay_gears div under that .gear_listing div.i know i have to make use of $(this).i just don't know how.
i tried doing this:
$(".gear_listing").hover(function(){
var this=$(this);
this.$(".overlay_gears").show();
},function(){
this.$(".overlay_gears").hide();
}
);
its not working
below is my div structure:
<li>
<a href="#">
<div class="gear_listing relative">
<div class="overlay_gears absolute"></div>
<div class="gear_description absolute">
<span>afdfdsfds sfd</span>
</div>
<img src="images/list_one.jpg">
</div>
</a>
</li>
<li>
<a href="#">
<div class="gear_listing relative">
<div class="overlay_gears absolute"></div>
<div class="gear_description absolute">
<span>afdfdsfds sfd</span>
</div>
<img src="images/list_two.jpg">
</div>
</a>
</li>
<li>
<a href="#">
<div class="gear_listing relative">
<div class="overlay_gears absolute"></div>
<div class="gear_description absolute">
<span>afdfdsfds sfd</span>
</div>
<img src="images/list_three.jpg">
</div>
</a>
</li>

.overlay_gears is children of .gear_listing so use like this
$(".gear_listing").hover(function(){
$(this).children(".overlay_gears").fadeIn();
},function(){
$(this).children(".overlay_gears").fadeOut();
});

Use .find() and .slideToggle() for animation effects or use .fadeToggle()
$(".gear_listing").hover(function() {
$(this).find(".overlay_gears").stop().slideToggle();
});
or
$(".gear_listing").hover(function() {
$(this).find(".overlay_gears").stop().fadeToggle();
});
Fiddle

Use this as the second-argument in selector which is context
By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function.
Internally, selector context is implemented with the .find() method, so $( "SELECTOR", this ) is equivalent to $(this).find("SELECTOR")
$(".gear_listing").hover(function() {
$(".overlay_gears", this).show();
}, function() {
$(".overlay_gears", this).hide();
});

Since overlay_gears is a child element of gear_listing,you can use .find() method
$(".gear_listing").hover(function() {
$(this).find(".overlay_gears").show();
}, function() {
$(this).find(".overlay_gears").hide();
});

Basically, you first needs to hide all .overlay_gears on hover and just needs to show the particular .overlay_gears that is the child of current hovered parent. And then in 'unhover' event you can simply hide all .overlay_gears divs..
HTML:
<ul>
<li>
<a href="#">
<div class="gear_listing relative">
<div class="overlay_gears absolute"> overlay_gears data1 overlay_gears data1</div>
<div class="gear_description absolute">
<span>afdfdsfds sfd</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="gear_listing relative">
<div class="overlay_gears absolute"> overlay_gears data2 overlay_gears data2</div>
<div class="gear_description absolute">
<span>afdfdsfds sfd</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="gear_listing relative">
<div class="overlay_gears absolute"> overlay_gears data3 overlay_gears data3 overlay_gears data3</div>
<div class="gear_description absolute">
<span>afdfdsfds sfd</span>
</div>
</div>
</a>
</li>
</ul>
JQuery:
$(document).ready(function(){
$( ".gear_listing" ).hover(
function() {
$( ".overlay_gears" ).hide();
$( ".overlay_gears", this ).show();
}, function() {
$( ".overlay_gears" ).hide();
}
);
});
Working Fiddle: http://jsfiddle.net/kfopaj7e/
I have just removed <img> tag for testing purpose and added few css in Fiddle for the visual thingy

you can use
$(".gear_listing").hover(function(){
$(this).children('.overlay_gears').show();
}
here we select all elements inside $(this) with required class
http://www.w3schools.com/jquery/jquery_traversing_descendants.asp

pass an event in function like
function(evt){
var th = $(evt.target);
$(th).find(".overlay_gears").show();
}

How to get closest div html content?

I have multiple ul and li's and want to get the closest div respective html content when click on li.
I have tried this like $(this).closest('div').find('.email-con').show().html() getting undefined.
<div class="col-md-12">
<div class="col-md-3 subs-alrts">
<ul class="cp-expand sent-mails" id="sent-mails">
<li class="clearfix">
<div class="cp-exp-title clearfix col-md-12">Dasara Mail</div>
<div class="cp-exp-con col-md-12">
<ul>
<li class="evnt-mail-cls" >06/01/16</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="col-md-9 email-con" id="email-con" style="display:none">
dasara mail content
</div>
</div>
My script is:
$('#sent-mails .cp-exp-con ul li').click( function(){
alert($(this).closest('div').find('.email-con').show().html());
});

If you are trying to find the content of .email-con then you need to traverse upto .subs-alrts and then pick its next element.
$('#sent-mails .cp-exp-con ul li').click( function(){
alert($(this).closest('.subs-alrts').next('.email-con').show().html());
});
See the final code:
$(function() {
$('#sent-mails .cp-exp-con ul li').click(function() {
var x = $(this).closest('.subs-alrts').next('.email-con');
x.show();
alert(x.html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="col-md-3 subs-alrts">
<ul class="cp-expand sent-mails" id="sent-mails">
<li class="clearfix">
<div class="cp-exp-title clearfix col-md-12">Dasara Mail</div>
<div class="cp-exp-con col-md-12">
<ul>
<li class="evnt-mail-cls">06/01/16</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="col-md-9 email-con" id="email-con" style="display:none">
dasara mail content
</div>
</div>

Try this
$('ul li').click(function(){
var a=$(this).closest('div');
a=$(this).closest('div').text();
alert(a);
});

You need :
$('#sent-mails .cp-exp-con ul li').click( function(){
alert($(this).closest('div').parent().find('.email-con').show().html());
});

$('#sent-mails .cp-exp-con ul li').click( function(){
alert($('.email-con').show().html());
});

Change for jquery code with following , it may help you.
$('#sent-mails .cp-exp-con ul li').click( function(){
alert($(this).parents('.subs-alrts').parent('div').find('.email-con').show().html());
});

Try this:
$('#sent-mails .cp-exp-con ul li').click( function(){
alert($(this).parents('.subs-alrts').parent().find('.email-con').show().html());
});

You have two way of doing this explained in code comments :
Note: the second (and easiest) require that you add a class to your top div (because col-md-12 is a bootstrap one that could change in the future)
// if you click there will be 2 alerts because I wrote two way of doing it :
$('#sent-mails .cp-exp-con ul li').click( function() {
var html = $(this)
// Get the parent with class "subs-alrts"
.parents(".subs-alrts")
// get the following element that have the class "email-con"
.next('.email-con')
.show().html();
alert(html);
});
// OR
$('#sent-mails .cp-exp-con ul li').click( function() {
var html = $(this)
// Get the parent with class "MAIN_DIV"
.parents(".MAIN_DIV")
// find the child element that have the class "email-con"
.find('.email-con')
.show().html();
alert(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 MAIN_DIV">
<div class="col-md-3 subs-alrts">
<ul class="cp-expand sent-mails" id="sent-mails">
<li class="clearfix">
<div class="cp-exp-title clearfix col-md-12">Dasara Mail</div>
<div class="cp-exp-con col-md-12">
<ul>
<li class="evnt-mail-cls" >06/01/16</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="col-md-9 email-con" id="email-con" style="display:none">
dasara mail content
</div>
</div>

Div is added to repeat

I started some time studying javascript, and I have some questions and was wondering if you can do this.
I have a div:
<div class="category"> </div>
it automatically repeats everytime I create a new category in a forum system. this is default "so there is no possibility to manually"
So wanted it to be added numbering for each category. thereby:
<div class="category1"> </div>
<div class="category2"> </div>
<div class="category3"> </div>
<div class="category4"> </div>
and so on, all this through jquery or javascript.
If it is possible what is the way?

jQuery solution:
$( ".category" ).each( function( index ) {
$( this ).addClass( "category"+(index+1) );
});
Result:
<div class="category category1"> </div>
<div class="category category2"> </div>
<div class="category category3"> </div>
<div class="category category4"> </div>
Solution 2:
$( ".category" ).each( function( index ) {
$( this ).removeClass( "category" ).addClass( "category"+(index+1) );
});
Result:
<div class="category1"> </div>
<div class="category2"> </div>
<div class="category3"> </div>
<div class="category4"> </div>
FIDDLE

HTML
<button id="category-button">Add Category</button>
<div id="category-container"></div>
Javascript
$('#category-button').on('click', function() {
var $container = $('#category-container'),
$elem = $('<div/>', {
"class": "category" + ($container.children().length + 1)
});
$container.append($elem);
});

How to add tabs in jquery

I have this code:
<script>
$(function() {
$("#tabs").tabs({ event: "mouseover" });
$("#tabs").tabs("add","#tab-4","Friends Discussions");
$("#tabs").tabs("add","#tab-5","Announcements");
$("#tabs").tabs("add","#tab-6","Contact");
});
</script>
<div class="demo" align="center" >
<div id="tabs">
<ul>
<li>Recent Discussions</li>
<li>Most Popular Discussions</li>
<li>Most Viewed Discussions</li>
</ul>
<div id="tabs-1">
<p>111111111111</p>
</div>
<div id="tabs-2">
<p>222222222222</p>
</div>
<div id="tabs-3">
<p>333333333333333</p>
</div>
<div id="tabs-4">
<p>4444444444</p>
</div>
<div id="tabs-5">
<p>555555555</p>
</div>
<div id="tabs-6">
666666666
</div>
</div>
</div>
Tabs 4, 5 and 6 have got the same content as appears in tab 1, 2 and 3. Why does that happen?

There's a typo in your code, you are adding #tab-n, yet in your code they have the Id tabs-n.
Try this:
$("#tabs").tabs("add","#tabs-4","Friends Discussions");
$("#tabs").tabs("add","#tabs-5","Announcements");
$("#tabs").tabs("add","#tabs-6","Contact");

You made a typo in the tabs you're adding. The id of the divs has to match the second parameter of each function.
Your divs look like this:
<div id="tabs-4">
But your code references:
$("#tabs").tabs("add","#tab-4","Friends Discussions");
^
s is missing
Try this code instead:
http://jsfiddle.net/ugjLs/
$(function() {
$( "#tabs" ).tabs({
event: "mouseover"
});
$( "#tabs" ).tabs("add","#tabs-4","Friends Discussions");
$( "#tabs" ).tabs("add","#tabs-5","Announcements");
$( "#tabs" ).tabs("add","#tabs-6","Contact");
});