My CSS:

#a_x200{
    visibility: hidden;
    width: 200px;
    height: 200px;
    background-color: black;
}

My JS:

<script type="text/javascript">
    function show(id) {
        document.getElementById(id).style.display = 'block';
    }
</script>

My Html

<div id="a_x200">asd</div>
<innput type="button" class="button_p_1" onclick="show('a_x200');"></input>

Not working I think I missed something!

My CSS:

#a_x200{
    visibility: hidden;
    width: 200px;
    height: 200px;
    background-color: black;
}

My JS:

<script type="text/javascript">
    function show(id) {
        document.getElementById(id).style.display = 'block';
    }
</script>

My Html

<div id="a_x200">asd</div>
<innput type="button" class="button_p_1" onclick="show('a_x200');"></input>

Not working I think I missed something!

• javascript
• jquery
• html
• css

• 1 You're setting visibility in css but changing display in js plus some syntax errors... – elclanrs Commented Dec 12, 2012 at 9:44
• #a_x200{display:none; width:200px;height:200px; background-color: black;} Still not working – SergkeiM Commented Dec 12, 2012 at 9:46
• 1 @PoWeR Can you recreate the problem in a jsFiddle? – Anthony Grist Commented Dec 12, 2012 at 9:49
• refer to show or hide dom – LF-DevJourney Commented May 23, 2017 at 7:17

6 Answers 6

try this:

document.getElementById('a_x200').style.visibility = 'visible';

You can try this code:

HTML Code:
        <div id="a_x200" style="display:none;">asd</div>
        <input type="button" class="button_p_1" onclick="showStuff('a_x200');"></input>

Java script:

<script type="text/javascript">
function showStuff(id) {
        document.getElementById(id).style.display = "block";
}
</script>

Try this code it will solve your problem.

You're using visibility: hidden to hide it, then attempting to use the display CSS property to make it visible. They're two completely separate properties, changing one won't magically change the other.

If you want to make it visible again, change the value of the visibility property to visible:

document.getElementById('a_x200').style.visibility = 'visible';

Here you can se one example i created in jquery Show/Hide using jquery .

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<style>
.slidingDiv {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}

.show_hide {
    display:none;
}

</style>
<script type="text/javascript">

$(document).ready(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });

});

</script>

<a href="#" class="show_hide">Show/hide</a>
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="show_hide">hide</a></div>​

try this...

function showStuff(id) {
    document.getElementById(id).style.display = 'block'; // OR
    document.getElementById(id).style.visibility = 'visible'; 
} 

edit

If you notice on your button click onclick="showStuff('a_x200');". you have already sent the id as a parameter to your function.. so i am taking the parameter and using it.

in your case have the parameter but not using it... though it does the samething...

OR u can do this

<input type="button" class="button_p_1" onclick="showStuff();"></input>  // omitting double 'n'

function showStuff() {
    document.getElementById('a_x200').style.display = 'block';
}  // missing curly bracket 

this both does the same thing

your input is miss spled

Should be like this:

My JS

<script type="text/javascript">
function showStuff(a_x200) {
        document.getElementById(a_x200).style.display = 'block';
}
</script>

My Html

<div id="a_x200">asd</div>
<innput type="button" class="button_p_1" onclick="showStuff('a_x200');"></input>