CODEWITHSUNDEEP
javascriptjquery
Arif Hidayat
Arif Hidayat

Reputation: 67

can i show or hide in same class with jquery

I have some divs, each one containing a date picker and a button. I would like to show / hide a single date picker by clicking on its respective Reschedule button. However, in my current solution all date pickers are toggled when I click on the button.

I've written this script:

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".datepicker_reschedule").hide();
        $(".panel-heading").on('click','.reschedule',function(){
            $(".datepicker_reschedule").fadeToggle("slow", "linear" );
        });
    });
    </script>

<div class="panel panel-default">
    <div class="panel-heading">
        <button class="btn reschedule">Reschedule</button>
        <button class="btn cancel">Cancel</button>
        <span class="datepicker_reschedule">
            <input type="text" class="form-control">
            <button class="btn btn-sm btn-warning">Save</button>
        </span>
    </div>
    <div class="panel-body" style="overflow: auto;">content A</div>
</div>

<div class="panel panel-default">
    <div class="panel-heading">
        <button class="btn btn-info reschedule"    id="" style="width:100px">Reschedule</button>
        <button class="btn btn-warning" id="cancel"     style="width:100px">Cancel</button>
        <span class="datepicker_reschedule">
            <input type="text" class="form-control">
            <button class="btn btn-sm btn-warning">Save</button>
        </span>
    </div>
    <div class="panel-body" style="overflow: auto;">content B</div>
</div>

Upvotes: 4

Views: 44

Answers (2)

Bellash
Bellash

Reputation: 8184

Here is a working snippet! I refer to the element being clicked and I have added the parent() and the find() functions to your code. Now it works perfectly!

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".datepicker_reschedule").hide();
        $(".reschedule").on('click',function(e){
            $(this).parent().find(".datepicker_reschedule").fadeToggle("slow", "linear" );
        });
    });
    </script>

<div class="panel panel-default">
    <div class="panel-heading">
        <button class="btn reschedule">Reschedule</button>
        <button class="btn cancel">Cancel</button>
        <span class="datepicker_reschedule">
            <input type="text" class="form-control">
            <button class="btn btn-sm btn-warning">Save</button>
        </span>
    </div>
    <div class="panel-body" style="overflow: auto;">content A</div>
</div>

<div class="panel panel-default">
    <div class="panel-heading">
        <button class="btn btn-info reschedule"    id="" style="width:100px">Reschedule</button>
        <button class="btn btn-warning" id="cancel"     style="width:100px">Cancel</button>
        <span class="datepicker_reschedule">
            <input type="text" class="form-control">
            <button class="btn btn-sm btn-warning">Save</button>
        </span>
    </div>
    <div class="panel-body" style="overflow: auto;">content B</div>
</div>

Upvotes: 1

Ofir Baruch
Ofir Baruch

Reputation: 10356

You simply need to find the relation between the button to the element you want to toggle. In your case they both are children of the same panel-heading element.

Therefore, simply changing the element that should be toggled like that:

$(this).parent().find(".datepicker_reschedule").fadeToggle("slow", "linear" );
  • $(this) - relates to the clicked button
  • parent() - the parent of that button
  • find(".datapicker..") - find the desired element.

Will do the job.

Fiddle

Upvotes: 3

Related Questions