Issue showing div with jquery

Question

I seem to be having a hard time displaying a div when a checkbox is clicked, the issue is pretty straight forward, but i cant seem to find the right jquery solution to resolve this, though i feel like i am very close.

$html=
'<form action="contacted.php"  method="POST">
<input type = "hidden" name = "contact" class  = "hidden" value = "'.$ip.'">
<input type="checkbox" id="contact'.$ip.'" value = "'.$ip.'" onclick="show()"/>
<div class="hide" style="
    display:none;
    border:3px 
    solid black; 
    background-color:grey; 
    color:white; 
    width:200px; 
    position:absolute; 
    left:40%;
    top:20%;
    -moz-border-radius: 15px; 
    border-radius: 15px;
    padding:4px;
    z-index:1000;
    Width:500px;
">
<textarea name = "notes" style = "" > Let\'s get some notes about that...</textarea>
<input type="submit" value="YES"/>
<input type="button" value="NO" onclick="hide()">
</div>
</form>';

this is in a for loop and $ip is an identifier. but its pretty straight forward.

jquery that i have tried

function show(){
    $(this).parent().find('.hide').css("display","block")
}

im trying to display the div hide when the checkbox is clicked (this happens multiple times on the same page) and i cant piece together the right combination from the jquery documentation. Any ideas? im sure this will be simple, I am more than willing to except javascript suggestions :)

Answer 1

add class to input like this and try it please

<input type="checkbox" id="contact'.$ip.'" class="contact_click" value="'.$ip.'" onclick="show()"/>

$('.contact_click').on('click',function(){
    $(this).closest('div').css('css','block');
});

Answer 2

you dont even need the class the checkbox is a direct child of the div.

       $(this).parent().show(0);

just make sure you bind the click handler to the check box and that will definitely work.

and just to make sure you are binding the event right try this when you click the check box

 function test(){
     var test = $(this).parent().attr('class');
     alert(test);

   }

and you should get hide. so if you get hide it is binded correctly

Answer 3

Pass the clicked element into your function like this

<input type="checkbox" id="contact'.$ip.'" value = "'.$ip.'" onclick="show(this)"/>

and

function show(element){
    $(element).parent().find('.hide').css("display","block");
}

Answer 4

Try this

Change

<input type="checkbox" id="contact'.$ip.'" value = "'.$ip.'" onclick="show()"/>

to

<input type="checkbox" id="contact'.$ip.'" value = "'.$ip.'" onclick="show(this)"/>

and script as

function show()
{
    this.parent().find('.hide').css("display","block");
}