CODEWITHSUNDEEP
javascriptjquery
John Smith
John Smith

Reputation: 6259

How to move content of div into another

If i have for example divs with the class="text1", that have an a-tag with the class"text" over them.

 <a class="text">ClickHere1</a>
  <div class="text1" style="display: none">
   <p>Hey</p>
   <p>Ho</p>
  </div>
 <a class="text">ClickHere2</a>
  <div class="text1" style="display: none">
   <p>Hey</p>
   <p>Ho</p>
  </div>

 <div id="Content">
 </div>

How can i move the content of the class="text1" into the div with the id="Content" when the user clicks on an a-tag that is directly over the div wit class"text1". Or better said that when an user clicks on an a-tag only the content of the next div with the class="text1" is appended to the div with the id:Content.

Also im asking me how i can insure that in the div with the id:Content always only content of one div is displayed!

Thanks and i hope you understand me !

Upvotes: 1

Views: 983

Answers (5)

The Alpha
The Alpha

Reputation: 146191

You may try this

$('.text').on('click', function(){
    $('#Content').html($(this).next('div.text1').html());
});

DEMO.

Upvotes: 0

Farhan
Farhan

Reputation: 752

Moving the content

$("a.text").click(function(){
$("#Content").html($("this")next().html());
})

Upvotes: 0

u54r
u54r

Reputation: 1805

Haven't tested it, but you're looking for something like this. This should give you an idea

$(function(){
   $(".text").click(function(){
     var contentClone = $(this).next().html().clone();
      contentClone.insert($("#Content"))

   });
})

Upvotes: 0

Ivan Chernykh
Ivan Chernykh

Reputation: 42166

Try this one:

$("a.text").on("click",function(){
   $("#Content").html(  $(this).next(".text1").html() );
})

Fiddle: http://jsfiddle.net/4w3Hy/1/

Upvotes: 3

Grim...
Grim...

Reputation: 16953

Do you want to move, or copy?

To copy the text:

$(".text").click(function() {
    $("#Content").html($(this).next(".text1").html());
});

If you want to move the text, use 

$(".text").click(function() {
    $("#Content").html($(this).next(".text1").html());
    $(this).html('');
});

Upvotes: 3

Related Questions