javascript - Foreach loop - hide/show based on click event jquery -
i have list of records in view using foreach. now, want hide/show textbox based on click event on image. code following:
@foreach (var dateitem in list) { <td style="width:6%;" id="hourstxt"> @html.textboxfor(modelitem => dateitem.hours, new { id = string.format("txthours"), style = "width:60%;" }) <img id=@( dateitem.project_id + "_" + dateitem.task_id + "_" + "c" + "_img") src="~/images/comment.png" onclick="getcomments(this.id);" /> <div id=@( dateitem.project_id + "_" + dateitem.task_id + "_" + "c") style="border:solid;display:none;"> <textarea id=@( dateitem.project_id + "_" + dateitem.task_id + "_" + "c" + "_text") style="position:absolute;" class="mycomment"></textarea> </div> </td> }
when click on second, third images in row, shows textarea under first textbox. function following:
function getcomments(id) { var prev; var strid = id; prev = strid.replace("_img", '');// alert(prev); //document.getelementbyid(prev).style.display = 'block'; if (document.getelementbyid(prev).style.display == 'block') { document.getelementbyid(prev).style.display = 'none'; } else if (document.getelementbyid(prev).style.display == 'none') { document.getelementbyid(prev).style.display = 'block'; } }
can me solve this? want hide/show textarea each time, below particular textbox.. in advance..
this simple using jquery. first give images class eg: prev
then in document.ready function:
$('.prev').on('click', function() { // current image clicked, // .next() gets sibling element directly after current element // .toggle toggles visibility $(this).next().toggle(); });
Comments
Post a Comment