Div isn't hiding and showing when clicked on another div

Question

I wrote a page as shown here....
Click here!
I used jQuery to hide a div and show the hidden div when clicked on another div. But it isn't working. How can I make it to work?
Here is my jQuery code:

<script>

    $(document).ready(
        function() {
            $('#offerOne').attr('style', 'background-color: #F96433 !important');
            $("#offerDetailsOne").hide();
            $('#offerTwo').on("click", function() {
                $('#offerDetailsOne').toggle();
            });

        });
    </script>

Answer 1

 $(document).ready( function() { $('#offerOne').attr('style', 'background-color: #F96433 !important'); $("#offerTwo").hide(); $('#offerToggle').on("click", function() { $('#offerOne').toggle(); $('#offerTwo').toggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <p id="offerOne">I Am Offer One</p> <p id="offerTwo">I Am Offer two</p> <p id="offerToggle">I am toggle!</p> 

Answer 2

After looking into your code it seems that your jquery code is working fine, making the div show/hide as you wish.

But this cannot be seen since this happens somewhere at very bottom of the browser, and since browser's vertical scroll bar is not showing up. You cannot scroll and so you cannot see this as working. (as I checked on firefox by removing some DOM elements to bring your hidden div in browser's visible viewport area).

EDIT you may verify this by adding overflow: auto; to body in your css. When you can see scroll bar then and also the targeted div.

---

So you need to remove following commented code from your css to view this functioning:

html, body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    /*overflow-y: hidden;*/
}