CODEWITHSUNDEEP
jquery
Niels Hermann
Niels Hermann

Reputation: 538

How can I toggle a dropdown like this with jquery and load

I'm looking for a simple solution for this problem that I have tried to solve.

I have a dropdown that I want to show when a button is clicked. When the same button is clicked again - I want the dropdown to hide.

Code:

$(document).ready(function(){   
    $(".QuestionShareBtn").click(function() {
        var clicks = 0;
        if (clicks == 0){
            $(".DropShare").show();
            $('.DropShare').load('share.php');
            var clicks = 1;
        } else if (clicks == 1){
            $(".DropShare").hide();
            var clicks = 0;
        }
    });
});

Upvotes: 0

Views: 16

Answers (1)

user9263373
user9263373

Reputation: 1074

Your code as written in your question will always go into the if condition because you're setting clicks = 0; prior to your test condition.

Now to answer your question, all you need to do is test the for display:none to alternate showing and hiding.

$(document).ready(function() {
  $(".QuestionShareBtn").click(function() {
    if ($(".DropShare").css('display') == 'none') {
      $(".DropShare").show();
      $('.DropShare').load('share.php');
    } else {
      $(".DropShare").hide();
    }
  });
});

Upvotes: 1

Related Questions