show/hide html content in javascript

Question

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);
}

Please debug your code. There are multiple unterminated strings in your last codeblock: ("#show"+i+"Link) — Cerbrus
– Cerbrus, Commented Nov 27, 2012 at 8:54
Ah yes, I see. The .toggle(); suggestions posted below should work. — Cerbrus
– Cerbrus, Commented Nov 27, 2012 at 8:59

MrCode · Accepted Answer · 2012-11-27 08:57:34Z

1

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();

answered Nov 27, 2012 at 8:57

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

SSS Over a year ago

no .. that is not the mistake here .. that i corrected it ..But i want answer for my question ..how to toggle without dom object inside for loop?

MrCode Over a year ago

It is the problem. You can't find the DOM element because it has an invalid ID.

Supr Over a year ago

@SSS, if you corrected it then you should update your question with the new code.

Samuel Caillerie Over a year ago

@SSS, I agree with MrCode that you should change the id when you create the element : you have an invalid ID.

Munchies · Accepted Answer · 2012-11-27 08:53:24Z

0

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();

answered Nov 27, 2012 at 8:53

Munchies

4446 silver badges14 bronze badges

Collectives™ on Stack Overflow

show/hide html content in javascript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related