CODEWITHSUNDEEP
javascriptcsshtml
Giffesnaffen
Giffesnaffen

Reputation: 560

Hiding and showing div, using javascript

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

Upvotes: 1

Views: 8763

Answers (2)

Raymond van Os
Raymond van Os

Reputation: 191

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>

Upvotes: -1

xcopy
xcopy

Reputation: 2288

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/.

Upvotes: 2

Related Questions