CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Garin
Garin

Reputation: 25

Displaying or Hiding Divs

I have read probably 50 articles that say how to hide or show div's depend on a click action. However, I have tried almost every approach and my div's do not hide or show. Seems likely I am missing something very basic.

<script>
    $(document).ready(function(){
        $('buynav').on('click',function(){
            document.getElementById('buycontent').style.display = 'block';
            document.getElementById('sellcontent').style.display = 'none';
        });
        $('sellnav').on('click',function(){
            document.getElementById('buycontent').style.display = 'none';
            document.getElementById('sellcontent').style.display = 'block';
        });

    });
    </script>

    <div id="contentContainer">
        <div id="documentSpace" style="left: 50%; top: 50px">
            <div id="headerPhoto" style="position:absolute;left:2.5%;width:95%; height:200px; background-image:url('../images/jpgHeader4.jpg'); background-size:cover;background-position:center; background-repeat:no-repeat;border-radius:9px; margin-top:17px;">
            </div>
            <div id="secondNav" style="position:absolute;left:2.5%;width:95%;height:75px;top:250px;text-align:center;vertical-align:middle;">
                <div id="buynav" class="buynav"><h2>Buy</h2></div>
                <div id="sellnav" class="sellnav"><h2>Sell</h2></div>
            </div>
            <div id="sellcontent" style="position:absolute;left:2.5%;width:95%;height:100%;top:350px;display:none;">
            </div>
            <div id="buycontent" style="position:absolute;left:2.5%;width:95%;height:100%;top:350px;display:block">
</div>
</div>
</div>

Upvotes: 0

Views: 52

Answers (2)

simeg
simeg

Reputation: 1879

Use jQuerys show() and hide() as such:

<script>
    $(document).ready(function(){
        $('#buynav').on('click',function(){
            $('#buynav').show();
            $('#sellnav').hide();
        });
        $('#sellnav').on('click',function(){
            $('#buynav').hide();
            $('#sellnav').show();
        });

    });
    </script>

Another option is to use jQuery's toggle(), but it requires you to have hidden one element before using it.

<script>
    $(document).ready(function(){
        $('#buynav').on('click',function(){
            $('#buynav').toggle();
            $('#sellnav').toggle();
        });
        $('#sellnav').on('click',function(){
            $('#buynav').toggle();
            $('#sellnav').toggle();
        });

    });
    </script>

Also I added # in the $('#buynav') and other JS selectors. And, as @mdesdev, pointed out you can replace the document.getElementById('buycontent') with $('#buynav') and $('#sellnav') as they seem to "exist" within your jQuery scope.

Upvotes: 2

Ashok Shah
Ashok Shah

Reputation: 956

I think you have forget to put # for your id.

 $('#buynav, #sellnav').on('click',function(){
     $('#buycontent').toggle();
     $('#sellcontent').toggle();
 });

Hope it works

Upvotes: 1

Related Questions