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();
});
});

JS work with only one id and ignores other

I ADDED TEXT RESIZER A BUT IT IS WORKING ON LAST ID , PLZ HELP ME TO FIX IT
<span class="category category--full">%s</span>
<h2 class="title title--full">%s</h2>
<div class="meta meta--full">
<img class="meta__avatar" src="%s" alt="%s" />
<span class="meta__author">%s</span>
<span class="meta__date"><i class="fa fa-calendar-o"></i>%s</span>
<span class="meta__reading-time"><i class="fa fa-clock-o"></i> %s</span>
<span class="meta__misc meta__misc--seperator"></span>
<span class="meta__misc"><div class="fb-like" data-href="http://hypnos.cosmicgirl.xyz?id=%s" data-layout="box_count" data-action="like" data-show-faces="true" data-share="true"></div></span><br><br><br>
<nav class="article-nav">
<button><i class="fa fa-angle-left"></i> <span>Previous</span></button>
<button><span>Next</span> <i class="fa fa-angle-right"></i></button>
</nav>
</div>
<div id="wrapper">
<div id="controls">
A
A
A
</div>
%s
</div>
<p>lorem link by <span>%s</span> </p>
<center><p> <div class="fb-comments" data-href="http://hypnos.cosmicgirl.xyz?id=%s" data-width="450" data-numposts="5"></div></p> </center> </article>',$myrow["title"],$myrow["titled"],$myrow["pic"],$myrow["title"],$myrow["author"],$myrow["date"],$myrow["time"],$myrow["id"],$myrow["text"],$myrow["link"],$myrow["author_d"],$myrow["id"]); }
?>
HERE IS JS CODE:
$(document).ready(function(){
$("#small").click(function(event){
event.preventDefault();
$("h1").animate({"font-size":"24px"});
$("h2").animate({"font-size":"16px"});
$("p").animate({"font-size":"12px", "line-height":"16px"});
});
$("#medium").click(function(event){
event.preventDefault();
$("h1").animate({"font-size":"36px"});
$("h2").animate({"font-size":"24px"});
$("p").animate({"font-size":"14px", "line-height":"20px"});
});
$("#large").click(function(event){
event.preventDefault();
$("h1").animate({"font-size":"48px"});
$("h2").animate({"font-size":"35px"});
$("p").animate({"font-size":"30px", "line-height":"40px"});
});
$( "a" ).click(function() {
$("a").removeClass("selected");
$(this).addClass("selected");
});
});

Why don't you write is as following, this is more reliable code:
$("a").click(function(e){
e.preventDefault();
$("a").removeClass("selected");
$(this).addClass("selected");
var type = $(this).attr('id');
if(type=="small"){
//Your code for small text
}
else if(type=="medium"){
//Your code for medium text
}
else if(type=="large"){
//Your code for large text
}
});

index of nested div with click event with jquery?

I have a click event that I'm using trying to get the index of the outermost parent div but can't seem to return it.
Here is the list of several divs:
<div class="owl-item">
<div class="icon-holder-selection" id="sel11">
<div class="thumbnail" id="cur11">
<img src="images/icons/11.jpg">
<div class="icon-action">
<span class="glyphicon glyphicon-remove remove-selection" id="11"></span>
<span class="icon-content">Remove</span>
</div>
</div>
</div>
</div>
<div class="owl-item">
<div class="icon-holder-selection" id="sel12">
<div class="thumbnail" id="cur12">
<img src="images/icons/12.jpg">
<div class="icon-action">
<span class="glyphicon glyphicon-remove remove-selection" id="12"></span>
<span class="icon-content">Remove</span>
</div>
</div>
</div>
</div>
<div class="owl-item">
<div class="icon-holder-selection" id="sel13">
<div class="thumbnail" id="cur13">
<img src="images/icons/13.jpg">
<div class="icon-action">
<span class="glyphicon glyphicon-remove remove-selection" id="13"></span>
<span class="icon-content">Remove</span>
</div>
</div>
</div>
</div>
My click event looks like this:
$(document).on("click", ".remove-selection", function(e) {
e.preventDefault ();
//var index = $(this).index();
var parent = $(this).closest('div');
var index = $(".owl-item").index(parent);
console.log("INDEX: " + index);
});
Any idea what I'm missing?

You need to provide a class name .owl-item for the div in .closest(), otherwise it will just return a direct parent of your span element.
Working demo: http://jsfiddle.net/1t6xgbth/
$(document).on("click", ".remove-selection", function(e) {
e.preventDefault ();
//var index = $(this).index();
var parent = $(this).closest('div.owl-item');
var index = $(".owl-item").index(parent);
alert(index);
console.log("INDEX: " + index);
});

Using delegateTarget is easier and simpler by using the owl-item selector instead of document:
$('.owl-item').on("click", ".remove-selection", function(e) {
e.preventDefault ();
console.log($(e.delegateTarget).index());
});
Another fiddle

How to listen click event and when clicked find parent div?

If I have html like this
<div class="col-xs-3">
<h2>A</h2>
<div class="abc">
<div class="def"><a class="btn"></a></div>
<h3>B</h3>
<p><a class="btn">C</a></p>
</div>
</div>
How can I listen click event on <a class="btn">C</a> and than find value of <h2>A</h2> (A)?
Here is my try
$(document).on('click', '.btn', function (event) {
var btn = event.target, container;
container = $(btn).closest('h2');
window.console.log(container);
event.preventDefault();
});

$('.btn').on('click', function() {
alert( $(this).closest('.abc').prev().text() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-3">
<h2>A</h2>
<div class="abc">
<div class="close"><a class="btn"></a></div>
<h3>B</h3>
<p><a class="btn">C</a></p>
</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);
});