Javascript unhide content

Question

Should be simple and clear, but I dont get what is wrong here. Simple javascript show/hide content. Tryed both display - block/none and visibility - show/hidden. Not working.. It works if all divs visibility named npctext_X are set to visible. but i need them to be hidden, becouse this will be used in as dialogues...

<script type="text/javascript">

function npcfunkc(karodyt,senas){

var showit = 'npctext_'+karodyt;
var hideit = 'npctext_'+senas

//document.getElementById(showit).style.display='block';
//document.getElementById(hideit).style.display='none';

document.getElementById(showit).style.visibility = 'show';
document.getElementById(hideit).style.visibility = 'hidden';
}
</script>


<div class='npctalk'>

<div id='npctext_1' style='visibility:visible;'>text 1 text 1 text 1 <br /><br />
    <button onclick='npcfunkc(2,1)'>show 2 [hide 1]
    </button><br />
    <button onclick='npcfunkc(3,1)'>show 3 [hide 1]
    </button><br />
</div>

<div id='npctext_2' style='visibility:hidden;'>text 2 text 2 text 2 <br /><br />
    <button onclick='npcfunkc(1,2)'>show 1, [hide 2]
    </button><br />
    <button onclick='npcfunkc(3,2)'>show 3, [hide 2]
    </button><br />
</div>

<div id='npctext_3' style='visibility:hidden;'>text 3 text 3 text 3 <br /><br />
    <button onclick='npcfunkc(2,3)'>show 2, [hide 3]
    </button><br />
    <button onclick='npcfunkc(1,3)'>show 1, [hide 3]
    </button><br />
</div>

</div>

Welcome to stackoverflow! Please refer the faq section for any help regarding markup. I edited you code indention for markup. -- stackoverflow.com/editing-help — Smamatti
– Smamatti, Commented Nov 16, 2011 at 22:26
Is there a particular reason why your not using a JS library like YUI or jQuery? — George P
– George P, Commented Nov 16, 2011 at 22:45
the script works for me as i have tried using display:block/none — david
– david, Commented Nov 17, 2011 at 0:23

MateusBR · Accepted Answer · 2011-11-16 22:35:34Z

1

As a best-practice and potential solution to your problem, you should use CSS classes and add or remove those classes from your objects.

This Tutorial may help you.

edited Nov 16, 2011 at 22:35

answered Nov 16, 2011 at 22:23

MateusBR

3242 silver badges10 bronze badges

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

3 Comments

blankabout Over a year ago

How is it a 'best practice' to add or remove classes from objects to hide or show them?

MateusBR Over a year ago

@blankabout it's better to use classes than directly setting style properties of the object. How to implement the actual hiding or showing of elements is left to the developer to decide.

blankabout Over a year ago

Whilst using CSS rather than inline styles is good practice, you should make it clear in your reply that adding or removing classes from an object is certainly not a good way of hiding or showing it which is what the question was about.

thesanerone · Accepted Answer · 2011-11-16 22:27:04Z

0

mYou are sending integers to your function. Try wrapping them with quotes like this to convert them to string....

npcfunkc("2", "1")

answered Nov 16, 2011 at 22:27

thesanerone

871 silver badge10 bronze badges

Collectives™ on Stack Overflow

Javascript unhide content

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related