Question

I am using Jquery UI for tabs. In each tab i have a empty div. I have a textarea outside the tabs in which i give values to store in those empty divs.

The problem is i have fixed the value to “Null” so that i can refresh textarea when i change between tabs.

But the problem is i have to keep the value of tab and display it in text area when we change to the previous tab.

I used the script

$(function() {
    $( "#tabs" ).tabs();
});
$(function() {
  $("#t1").unbind("click").click(function()
    {
    $('#custom_text').val("");
    $("#custom_text").unbind("keyup").keyup(function()
        {
    $('#tab1').text('').append($("#custom_text").val()); 
    });
});
  });
 $(function() {
  $("#t2").unbind("click").click(function()
    {
$('#custom_text').val("");
    $("#custom_text").unbind("keyup").keyup(function()
   {
    $('#tab2').text('').append($("#custom_text").val()); 

    });
});
  });
$(function() {
$("#t3").unbind("click").click(function()
    {
$('#custom_text').val("");
    $("#custom_text").unbind("keyup").keyup(function()
    {
    $('#tab3').text('').append($("#custom_text").val()); 

        });
});
});

And My HTML is

<div id="tabs">
<ul>
    <li id="t1"><a href="#tabs-1">TAB 1</a></li>
    <li id="t2"><a href="#tabs-2">TAB 2</a></li>
    <li id="t3"><a href="#tabs-3">TAB 3</a></li>
</ul>
<div id="tabs-1">
    <p>TAB 1 CONTENT</p>
  <div id="tab1"></div>
</div>
<div id="tabs-2">
    <p>TAB 2 CONTENT</p>
   <div id="tab2"></div>
</div>
<div id="tabs-3">
    <p>TAB 3 CONTENT</p>
   <div id="tab3"></div>
</div>


</div>
<textarea id="custom_text" rows="5" cols="30"></textarea>

I have made a BIN. Kindly assist me where i am making error in the program

Answer 1

If I got this right, you want the textarea to be populated with the value of the tab entered before. If so, replace line

$('#custom_text').val("");

with

$('#custom_text').val($("#tab1").text());

and do this for all the tabs.