CODEWITHSUNDEEP
javascriptjquery
SSS
SSS

Reputation: 1430

show/hide html content in javascript

I have response which is coming from backend . Now i want to create some links, if i click those links it should display html content below that link and if i click that link again those html content should go. I know jquery hide() and show() . But here i am using for loop and i am not able to find DOM element , as follows,

var html = "<div id=finalDiv></div>";
$("#finalDiv").dialog();
var ht;
for(var i in response) {
  ht +="<table><tr><td><label>A:</label></td><td><a onclick=\"showOneLink('"+response[i].B+"','"+i+"')\" >'"+response[i].A+"'</a></td></tr>";
  ht += "<tr><td><div id=show'"+i+"'Link style='dislay:none;'></div></td></tr></table>";
}
$("#finalDiv").append(ht);

Now when i click showOneLink , hidden div should display but that div's DOM will not be created . As ,

function showOneLink(B,i) {
  var htm = "<b>log:'"+B+"'</b>";
  $("#show"+i+"Link").css('display','block');
  $("#show"+i+"Link").append(htm);
}

Upvotes: 0

Views: 184

Answers (2)

MrCode
MrCode

Reputation: 64526

The problem is this id attribute:

id=show'"+i+"'Link

That will produce invalid HTML: id=show'5'Link

Change it to:

ht += "<tr><td><div id='show"+i+"Link' style='dislay:none;'></div></td></tr></table>";

Also use toggle() instead of css():

 $("#show"+i+"Link").toggle();

Upvotes: 1

Munchies
Munchies

Reputation: 444

Selectors are Strings, close the ""

like $("#show"+i+"Link");

or the hole code:

function showOneLink(B,i) {
  var htm = "<b>log:'"+B+"'</b>";
  $("#show"+i+"Link").css('display','block');
  $("#show"+i+"Link").append(ht);
}

and better use toggle:

    $("#show"+i+"Link").append(ht);
    $("#show"+i+"Link").toggle();

Upvotes: 0

Related Questions