Hiding and showing div, using javascript

Question

while working on a school project i ran into a problem using javascript to show and hide a couple of divs(five to be exact). I want to be able to open all five and place them on the page using position:absolute and top and left cordinates, since this makes them float on top of my text content i made a seprate div, named wrapper to occupy their space and push the text down. However what seem like a pefect code snippet, isn't. Neither the menu divs named gs 1 - gs 5 or the occupy div shows up. The thought behind the counter is that if a menu div is oppened counter ++, else (meaning a menu is set as unhidden) the counter is subtracted, and therefor if none is open the counter equals 0 and the occupy should be set as hidden.

int count = 0;

function unhide(col2) {

var item = document.getElementById(col2);
var wrap = document.getElementById('wrapper');

    if (item) 
    {       
        //wrap.className=(item.className=='hidden')?'unhidden':'hidden';
        item.className=(item.className=='hidden')?'unhidden':'hidden';  

        if(item.className=='unhidden')
        {
        count++;            
        }
        else if(item.className=='hidden')
        {
        count--;
        }
    if(count > 0)
    {
    wrap.className=(item.className=='hidden')?'unhidden':'hidden';  
    }

    }




 }
<a href="javascript:unhide('gs1');">Game Station 1</a>
<a href="javascript:unhide('gs2');">Game Station 2</a>  
<a href="javascript:unhide('gs3');">Game Station 3</a>
<a href="javascript:unhide('gs4');">Game Station 4</a>
<a href="javascript:unhide('gs5');">Game Station 5</a>

</div>
    <div id="wrapper" class="hidden">
        <div id="gs1" class="hidden">       
        </div>

        <div id="gs2" class="hidden">   
        </div>


        <div id="gs3" class="hidden">       
        </div>

        <div id="gs4" class="hidden">       
        </div>

        <div id="gs5" class="hidden">       
        </div>
    </div>

And the small css snippet

.hidden { visibility: hidden; display: none;}
.unhidden { visibility: visible; display: block;}

just for fun, could you alert(item.className); Is this the full code example? Because if its not, you may have a hard time with item.className == 'hidden' since there will be more than one class... — ThePrimeagen
– ThePrimeagen, Commented Mar 26, 2012 at 20:20
Curious... can you show us the code that's being output for those divs in question? I'm wondering if by chance they have additional classes on them other than hidden or unhidden. Or for that matter if you're outputting them with no class at all for the start. — Brian
– Brian, Commented Mar 26, 2012 at 20:21
No data is yet being output in the divs, just the css code #gs1 { height: 400px; width: 192px; background-color: grey; left: 384px; top: 0; } its the same for all the 5 divs excluding the number behind the name "gs" — Giffesnaffen
– Giffesnaffen, Commented Mar 26, 2012 at 20:42
and yes it is the full code only the javascript tags are left out — Giffesnaffen
– Giffesnaffen, Commented Mar 26, 2012 at 20:45
Show us more code. You could have some errors because of other code that you are not including! — ThePrimeagen
– ThePrimeagen, Commented Mar 26, 2012 at 20:47

xcopy · Accepted Answer · 2012-03-26 21:01:47Z

2

This is due to the fact that the wrapper is being marked as hidden after the div is unhidden. See my example - http://jsfiddle.net/MYaNb/2/.

edited Mar 26, 2012 at 21:01

answered Mar 26, 2012 at 20:43

xcopy

2,26419 silver badges24 bronze badges

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

Comments

Mogsdad · Accepted Answer · 2013-05-16 15:47:44Z

-1

Put this in the css

.show_hide 
    {
        display: none;
    }

Put this in the head of you page.

<script type="text/javascript">
    $(document).ready(function()
    {
        $(".slidingdiv").hide();
        $(".show_hide").show();
        $('.show_hide').click(function()
        {
            $(".slidingdiv").slideToggle();
        });
     });
</script>

Put this in the place where you will show and hide a div

<div class="slidingdiv">
   something
</div>

<a href="#" class="show_hide">show/hide</a>

edited May 16, 2013 at 15:47

Mogsdad

46k21 gold badges166 silver badges289 bronze badges

answered Mar 27, 2012 at 11:58

Raymond van Os

1911 gold badge5 silver badges18 bronze badges

Collectives™ on Stack Overflow

Hiding and showing div, using javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related