CODEWITHSUNDEEP
javascriptjquery
Mr.Smithyyy
Mr.Smithyyy

Reputation: 1339

Trouble opening and closing a div with jQuery

.box-one {
  border: 0.1em solid #ccc;
 }

.dropdown-info {
  display: none;
}
<div class="box-one">
  <div class="header">
    <h3 class="text-center">Sample Header</h3>
   </div>
  <div class="dropdown-info">
    <p class="text-center">Sample Text</p>
  </div>
</div>

I'm trying to open and close a div if another div is clicked on and I tried with both .toggle() and .click() but it won't work. I would like to get someone else's opinion on it. I will show how I tried accomplishing it using both methods

$(document).ready(function() {

    var descriptionOpen = false;

    if (descriptionOpen === false) {
        $('.header').click(function() {
            $('.dropdown-info').show();
            descriptionOpen === true;
        });
    };
    else if (descriptionOpen === true) {
        $('.header').click(function() {
            $('.dropdown-info').hide();
            descriptionOpen === false;
        });
    };
});


$(document).ready(function() {

    $('.header').toggle(function() {
        ('.dropdown-info').show();
    }, function() {
        ('.dropdown-info').hide();
    });
});

Upvotes: 0

Views: 45

Answers (1)

isherwood
isherwood

Reputation: 61133

Just do this:

$('.header').click(function() {
    $('.dropdown-info').toggle();
});

Upvotes: 2

Related Questions