Example here:

how can i display the text of the green div in the grey div, when i click on the [+] icon? Ive tried many different scenarios but none works, can someone give me few pointers how can i do this, i would really appreciate.

    <div id="wrapper">
      <div class="container">
        <div class="first" id="f">
          <div class="set">+</div>
          this is the 1st element
        </div>
        <div class="first" id="s">
          <div class="set">+</div>
          this is the 2nd element
        </div>
        <div class="first" id="t">
          <div class="set">+</div>
          this is the 3rd element
        </div>
      </div>

      <div id="cc"></div>
    </div>

CSS

.first{
  margin-top:5px;
  border:1px solid black;
  width:190px;
  height:40px;
  background-color:green;
}

#cc{
  margin-top:5px;
  width:190px;
  height:40px;
   border:1px solid black;
  background-color:grey;
}

.set{
  cursor:pointer;
  color:#fff;
  font-size:33px;
  float:right;
  border:1px solid white;
}

Example here: http://codepen.io/agentmi6/pen/JoZZWm

how can i display the text of the green div in the grey div, when i click on the [+] icon? Ive tried many different scenarios but none works, can someone give me few pointers how can i do this, i would really appreciate.

    <div id="wrapper">
      <div class="container">
        <div class="first" id="f">
          <div class="set">+</div>
          this is the 1st element
        </div>
        <div class="first" id="s">
          <div class="set">+</div>
          this is the 2nd element
        </div>
        <div class="first" id="t">
          <div class="set">+</div>
          this is the 3rd element
        </div>
      </div>

      <div id="cc"></div>
    </div>

CSS

.first{
  margin-top:5px;
  border:1px solid black;
  width:190px;
  height:40px;
  background-color:green;
}

#cc{
  margin-top:5px;
  width:190px;
  height:40px;
   border:1px solid black;
  background-color:grey;
}

.set{
  cursor:pointer;
  color:#fff;
  font-size:33px;
  float:right;
  border:1px solid white;
}

• javascript
• jquery

• 1 Thanks for all your solutions, i tried all of them, and thanks for your time and fast response. and damn i cant upvote still low rep user. – john Commented Feb 28, 2015 at 14:24

6 Answers 6

You'll have to get the text of the .first div, i suggest you put the text into a tag so it'll be easy to get it, and so you don't get the + of the .get button. Here's the new JavaScript

$(document).ready(function(){

  $('.set').click(function(){

    // Get the text inside the span in the parent .first of the clicked .set button
    var text = $(this).parent('.first').find('span').text();
    $('#cc').text(text);
 });

});

The HTML would look like this

<div class="container">
  <div class="first" id="f">
    <div class="set">+</div>
    <span>this is the 1st element</span>
  </div>
  <div class="first" id="s">
    <div class="set">+</div>
    <span>this is the 2nd element</span>
  </div>
  <div class="first" id="t">
    <div class="set">+</div>
    <span>this is the 3rd element</span>
  </div>
</div>
<div id="cc"></div>

Here's an updated CodePen

You can use this:

$(document).ready(function(){

  $('.set').click(function(){
    var text = $(this).parents("div.first").text();
    $("#cc").text(text);
  })

});

This Code could help you

var tempText="";

$('.container .set').each(function(){
tempText=tempText+ $(this).html();

});

$('#cc').html(tempText);

Here try this (fiddle: http://jsfiddle/nek9fona/)

JQ:

$(function(){
    $('.set').click(function(){
        var $this = $(this);
        var text = $this.parent('.first').text();

        $('#cc').text(text);

    });
});

Put this in your head html section. Or bottom of body section.

<script>
$(document).ready(function() {
  $('.set').on('click', function(){
   var text_val = $(this).closest('div.first').text();
   $('#cc').text(text_val);
  });
});
</script>

I guess that you don't want the copied text to contain "+" symbol? In this case you can do this:

$('.set').click(function() {
    var text = $(this.nextSibling).text().trim();
    $('#cc').text(text);
});

Demo: http://codepen.io/anon/pen/MYXXrr

Note, that it makes sense to improve HTML structure a little by wrapping the text into some container:

<div class="first" id="s">
  <div class="set">+</div>
  <div class="text">this is the 2nd element</div>
</div>

In this case, code would bee much more reliable and cleaner:

$('.set').click(function() {
    var text = $(this).next('.text').text(); // or $(this).parent().find('.text')
    $('#cc').text(text);
});

Demo: http://codepen.io/anon/pen/ogyyoO