Show/Hide div, with plain JS

Question

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!

You're setting `visibility` in css but changing `display` in js plus some syntax errors... — elclanrs, Dec 12 '12 at 09:44
#a_x200{display:none; width:200px;height:200px; background-color: black;} Still not working — SergkeiM, Dec 12 '12 at 09:46
@PoWeR Can you recreate the problem in a [jsFiddle](http://jsfiddle.net)? — Anthony Grist, Dec 12 '12 at 09:49
refer to [show or hide dom](https://stackoverflow.com/a/21070237/6521116) — LF00, May 23 '17 at 07:17

score 11 · Answer 1 · answered Dec 12 '12 at 09:45

11

try this:

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

answered Dec 12 '12 at 09:45

Artem Veikus

119
3

simbu94 · Answer 2 · 2012-12-12T12:59:27.263

4

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.

edited Dec 12 '12 at 12:59

answered Dec 12 '12 at 10:02

simbu94

1,012
2
10
22

score 2 · Accepted Answer · answered Dec 12 '12 at 09:45

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';

score 2 · Answer 4 · answered Dec 12 '12 at 09:55

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>

AMember · Answer 5 · 2012-12-12T10:52:17.313

1

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>

edited Dec 12 '12 at 10:52

answered Dec 12 '12 at 09:43

AMember

3,037
2
33
64

Using `document.getElementById('a_x200')` is perfectly fine, it just makes the parameter on the function totally pointless. – Anthony Grist Dec 12 '12 at 09:48
@PoWeR missing curly bracket in your function too.. :):) – bipen Dec 12 '12 at 09:56
@Anthony Grist he didnt use the parameter that was passed to his method, I changed it so it will get the id as parameter. – AMember Dec 12 '12 at 10:52

bipen · Answer 6 · 2012-12-12T09:58:25.013

1

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

edited Dec 12 '12 at 09:58

answered Dec 12 '12 at 09:43

bipen

36,319
9
49
62

1

@PoWeR He renamed the parameter on the function, and then actually passed it to the `document.getElementById()` call. The value of `id` will change, depending on what you pass as that first argument when calling `showStuff()`. If you do `showStuff('a_x200')` (like you are when the button is clicked on) then `id` will equal `'a_x200'`. – Anthony Grist Dec 12 '12 at 09:48

Show/Hide div, with plain JS

6 Answers6

Linked