CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ajay Kulkarni
Ajay Kulkarni

Reputation: 3039

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

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>

Upvotes: 1

Views: 110

Answers (2)

Ravi Khandelwal
Ravi Khandelwal

Reputation: 726

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

Upvotes: 0

Sachin Prabhu
Sachin Prabhu

Reputation: 26

$(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>

Upvotes: 1

Related Questions