CODEWITHSUNDEEP
jqueryhtmlcss
Char
Char

Reputation: 318

jQuery: slideDown() showing wrong divs

I have 4 different divs I want to show for 4 different buttons. So when the uesr clicks a specific link, a specific div will show up. This is my HTML:

Links:

    <div class="col-md-3 text-center">
    <a id="clickme1">I'm Interested</a>
    </div>

    <div class="col-md-3 text-center">
    <a id="clickme2">I'm Interested</a>
    </div>

    <div class="col-md-3 text-center">
    <a id="clickme3">I'm Interested</a>
    </div>

    <div class="col-md-3 text-center">
    <a id="clickme4">I'm Interested</a>
    </div>

My Divs:

    <div class="col-md-3 text-center" id="ad1">
    <p>Show Table Here</p>
    </div>

    <div class="col-md-3 text-center" id="ad2">
    <p>Show Table Here</p>
    </div>

    <div class="col-md-3 text-center" id="ad3">
    <p>Show Table Here</p>
    </div>

    <div class="col-md-3 text-center" id="ad4">
    <p>Show Table Here</p>
    </div>

My jQuery:

$("#clickme1").click(function () {
    if ($("#ad1").is(":hidden")) {
        $("#ad1").slideDown("slow");
    } else {
        $("#ad1").hide();
    }
});

// Ad 2
$("#clickme2").click(function () {
    if ($("#ad2").is(":hidden")) {
        $("#ad2").slideDown("slow");
    } else {
        $("#ad2").hide();
    }
});

// Ad 3
$("#clickme3").click(function () {
    if ($("#ad3").is(":hidden")) {
        $("#ad3").slideDown("slow");
    } else {
        $("#ad3").hide();
    }
});

//Ad 4
$("#clickme4").click(function () {
    if ($("#ad4").is(":hidden")) {
        $("#ad4").slideDown("slow");
    } else {
        $("#ad4").hide();
    }
});

In my CSS, all 4 divs have the attribute display:none.

Problem

When I click on my links, 1 by 1, they all show fine. But if I click on any other link to start with, it always shows the first div (#ad1). This is the same when I want to hide them, if I click on any of them again, it hides another div. There must be an obvious step I am missing! Please help :(

Upvotes: 0

Views: 52

Answers (2)

Char
Char

Reputation: 318

Since I was using Bootstrap, I was using the same div that had the col-3 width (class) and then I was hiding that using the id #ad1 etc, when it was hidden, it had no width, so when I was calling the 2nd, 3rd, or 4th div, they were showing at the beginning because there was nothing aligning the divs into their place since the others had no width! This was not a jQuery problem, just simple Bootstrap/HTML :( Sorry and thank you all for your answers!

Upvotes: 0

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18113

Instead of making all ids, rather use a class. Then add a data-slid-id to the link, that is the id that should slide down or up.

When adding extra links and tables, you don't need an extra function.

$(function() {
  $('#ad1,#ad2,#ad3,#ad4').hide();
  $('.clickme').on('click',function() {
      $('#'+$(this).data('slide-id')).slideToggle('slow');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 text-center">
    <a class="clickme" data-slide-id="ad1">I'm Interested</a>
</div>

<div class="col-md-3 text-center">
    <a class="clickme" data-slide-id="ad2">I'm Interested</a>
</div>

<div class="col-md-3 text-center">
    <a class="clickme" data-slide-id="ad3">I'm Interested</a>
</div>

<div class="col-md-3 text-center">
    <a class="clickme" data-slide-id="ad4">I'm Interested</a>
</div>



<div class="col-md-3 text-center" id="ad1">
    <p>Show Table Here 1</p>
</div>

<div class="col-md-3 text-center" id="ad2">
    <p>Show Table Here 2</p>
</div>

<div class="col-md-3 text-center" id="ad3">
    <p>Show Table Here 3</p>
</div>

<div class="col-md-3 text-center" id="ad4">
    <p>Show Table Here 4</p>
</div>

Upvotes: 1

Related Questions