How to toggle when a div has been clicked

Question

Hello guys I have following code snippet

<script>
$(document).ready(function(){
$(".ui-radio").click(function(){
   $("#textarea").toggle();
   return false;
});
});
</script> 

Then I have this HTML code where I am using mobile Jquery

<fieldset data-role="controlgroup">
<input class="info" id="radio-choice-1" name="opcmessage" title="<?php echo $this->translate->translate("opcsend1","nucleo","En la propiedad, favor de enviarme más información")?>" type="radio" value="1" <?php if($opcmessage==1){?> checked="checked" <?php }?> />
<label for="radio-choice-1">&nbsp;En la propiedad, favor de enviarme más información</label>

<input class="info" id="radio-choice-2" name="opcmessage" title="<?php echo $this->translate->translate("opcsend2","nucleo","En la propiedad, deseo visitarla")?>" type="radio" value="2" <?php if($opcmessage==2){?> checked="" <?php }?> />
<label for="radio-choice-2">En la propiedad, deseo visitarla</label>
<?php if(count($images)<=0){?>
<input class="info" id="radio-choice-3" name="opcmessage" title="<?php echo $this->translate->translate("opcsend3","nucleo","En la propiedad, envieme fotos")?>" type="radio" value="3" <?php if($opcmessage==3){?> checked="" <?php }?> />
<label for="radio-choice-3">En la propiedad, envieme fotos</label>

<?php }else{?>

<input class="info" id="radio-choice-4" name="opcmessage" title="<?php echo $this->translate->translate("opcsend4","nucleo","En la propiedad, envieme más fotos")?>" type="radio" value="4" <?php if($opcmessage==4){?> checked="" <?php }?> />
<label for="radio-choice-4">En la propiedad, envieme más fotos</label>
</fieldset >

And I have this text area

<div data-role="fieldcontain">
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>

I am trying to toggle the textarea on when one of the radio button is clicked . I am able to toggle it in the normal browser but this is not working in the mobile device .

Please help me out if you know why this problem is occurring ??

Also I want to display the detail of the radio button in the text area .. Like if " En la propiedad, deseo visitarla" is slected the textarea should show that content inside it

EDIT 1

Works on a normal DIV with out the Mobile JQuery tested . I think the problem is maybe the class name which mobile JQuery throws on browsers .... I am very new to this maybe I am wrong Thanks in Advance

EDIT 2

Added the event

$('.ui-radio').bind('touchend',function(e){ $("#textarea").toggle();

It works fine but the problem is I only want to toggle hide and unhide when the first option is clicked . right now it toggles on all the options like even it is open . When you click any other option it closes . Here is the script which I am using

    <script>
    $(document).ready(function(){
    $("#textarea").hide();
    $('.ui-radio').bind('touchend',function(e){
        $("#textarea").toggle();
       return false;
    });
    });

</script>

Edit 3

<script>
$(document).ready(function(){
$("#textarea").hide();
$('.ui-radio').bind('touchstart',function(e){
    $("#textarea").show();
   return false;
});
});
</script> 

Problem is with the touch behavior of the div ui-radio . If i try to touch that part and scroll down then it does not work properly . Tested in Chrome, Opera and Firefox.

Edit 4

Also I am trying to append some content int the #textarea bbut I am not able to do it can someone help me out with this .

Script

<script>
$(document).ready(function(){
$("#textarea").hide();

$('.ui-radio').bind('touchstart',function(e){
    $('<p>En la propiedad, favor de enviarme más información</p>').appendTo('#textarea');
    $("#textarea").show();
  return false;
});

});
</script>

EDIT 5

<script>
$(document).ready(function(){
$("#textarea").hide();

$('.ui-radio').bind('touchstart',function(e){
    $("#textarea").show();
    var a = $( this ).find( "label" ).attr('for');
    if(a == "radio-choice-1"){
     $("#textarea").html( "Estoy interesado(a) en la propiedad, favor de enviarme más información" );}
     if(a == "radio-choice-2"){
     $("#textarea").html( "Estoy interesado(a) en la propiedad, deseo visitarla" );}
     if(a == "radio-choice-3"){
     $("#textarea").html( "Estoy interesado(a) en la propiedad, envieme fotos" );}
     if(a == "radio-choice-4"){
     $("#textarea").html( "Estoy interesado(a) en la propiedad, envieme más fotos" );}
   return false;
});

});
</script> 

This is the script which I came up with it works fine but as I said the touch behavior is effectig other effects of JQuery and Mobile JQuery in the page . Please suggest me something what I should do

EDIT 6

here is a fiddle of it http://jsfiddle.net/7GY8K/

my problem is that if you click on the options of the radio button it should open the textarea but its not happening. But if the same code I add in normal page which is not a hyperlink it works fine please have a look

Answer 1

To fire the event with mobile device you may try replacing

$(".ui-radio").click(function()

with

$(".ui-radio").on('click touch', function ()

Hope it helps.

Answer 2

You should bind to touchstart or touchend events on mobile. Try this:

$('.ui-radio').bind('touchstart',function(e){
    $("#textarea").toggle();
});

Answer 3

$(document).ready(function(){
   $(".slidingDiv").hide();
   $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
  });
});

    <p>Toggle hide show/p>
    <div class="toggleMe">Toggle between hide() and show()</div>

Answer 4

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $(".click_me").click(function(){
    $(".hideshow").toggle();
  });
});
</script>
</head>
<body>
<div class="click_me">click me</div>
<br>
<br>
<div class="hideshow">This is a paragraph.</div>
</body>
</html>