CODEWITHSUNDEEP
javascriptjqueryhtml
Tiago
Tiago

Reputation: 653

JQuery - Show multiple divs

I'm having some trouble making a working show div and I just can't get it. So I have the following:

function GetCaptcha() {
$(".panel-captcha").fadeIn(500);
}
<a href="#" onClick="GetCaptcha()"> Get </a>
<div class="panel-captcha">
TEXT
</div>

The div has the display:none tag. It works very well, but I have one problem. I need to have many divs inside the same page ( not the same, it may change from database ). If I have 3 or 4 panels, when I click the button it will show them all instead only the div where I have the link to show.

Anyone can help me? Thanks.

Complete HTML file...

<div class="col-md-4">
  <div class="panel panel-blue" data-widget='{"draggable": "false"}'>
    <div class="panel-heading">
      <h2>TEXT</h2>
      <div class="panel-ctrls">
        <a href="#" class="button-icon" onClick="GetCaptcha(this)"><i class="ti ti-eye"></i></a> 
        <!-- BUTTON TO SHOW CAPTCHA -->
      </div>
    </div>
    <div class="panel-body">
      <small>Other Text...</small>
    </div>
    <div class="panel-footer">
      <div class="tabular">
        <div class="tabular-row tabular-row">
          <div class="tabular-cell">
            <span class="status-total"><strong>More Text...</strong></span>
          </div>
          <div class="tabular-cell">
            <span class="status-pending">Other Text...</span>

          </div>
        </div>
      </div>
    </div>
    <div class="panel-captcha">
      <!-- HIDDEN DIV -->
      <div class="tabular-cell">
        HIDDEN TEXT
      </div>
    </div>
    <!-- END HIDDEN DIV -->
  </div>
</div>

Upvotes: 1

Views: 87

Answers (1)

Satpal
Satpal

Reputation: 133453

You can pass the reference of element to click handler, then use .next()

Script

function GetCaptcha(elem) {
  $(elem).next(".panel-captcha").fadeIn(500);
}
.panel-captcha {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" onClick="GetCaptcha(this)"> Get </a>
<div class="panel-captcha">
  TEXT
</div>

As you are using jQuery bind event using it.

HTML

<a href="#" class="captcha"> Get </a>
<div class="panel-captcha">
  TEXT
</div>

Script

$(function() {
  $('.captcha').on('click', function () {
    $(this).next(".panel-captcha").fadeIn(500);
  });
});

EDIT

As per updated HTML use

function GetCaptcha(elem) {
  $(elem).closest('.panel').find(".panel-captcha").fadeIn(500);
}

Upvotes: 1

Related Questions