CODEWITHSUNDEEP
jqueryhtmlshow-hide
amir moradifard
amir moradifard

Reputation: 353

hide specific divs after clicking on other div using jQuery

I am quite new in jQuery.

I have a html code as below which is generated on the fly and added to my page:


<div class="outstandingcallback">
<span>a</span>
<span>b</span>
</div>
<div class="outstandingcallback">
<span>c</span>
<span>d</span>
</div>
    ......

I need to hide one of them when I click on the other one. I used following jQuery but I am not sure how can I hide the div element.


    $('.outstandingcallback').bind('click', function () {
                var selectdCallItemID = $(".callItemID", this).html();


                var myHtmlCode = $('#CallBacks').html();

                $('' + myHtmlCode + '').find('div').each(function () {
                    var thisCallID = $(".callItemID", this).html();

                    if (thisCallID == selectdCallItemID ) {
                        alert("test");
                        $('' + myHtmlCode + '').find(this).hide();
                    }
                });
            });

I am not sure about the following part:


    $('' + myHtmlCode + '').find(this).hide();

Upvotes: 0

Views: 714

Answers (5)

user1981569
user1981569

Reputation:

to simply hide the unclicked div all you need is this:

 $(function(){
    $('.outstandingcallback').on('click', function () {
        $(this).siblings().hide();
    });
})

Upvotes: 0

rajesh kakawat
rajesh kakawat

Reputation: 10896

try something like this,FIDDLE

 $('.outstandingcallback').bind('click', function () {
     $('.outstandingcallback').hide(); 
     $(this).show(); 
});

Upvotes: 1

Jai
Jai

Reputation: 74738

You can use .siblings() to find other elems at same level:

because which is generated on the fly and added to my page use .on and delegate the event to the closest existing parent or document

 $(document).on('click', '.outstandingcallback', function () {
    $(this).siblings('.outstandingcallback').hide();
 });

Upvotes: 1

cvelinho
cvelinho

Reputation: 576

if($(".outstandingcallback:first").click()) {
    $(".outstandingcallback:first").show();
    $(".outstandingcallback:last").hide();
} else if ($(".outstandingcallback:last").click()) {
    $(".outstandingcallback:first").hide();
    $(".outstandingcallback:last").show();
}

Upvotes: 0

Prashant Shilimkar
Prashant Shilimkar

Reputation: 533

<script>
 function doAnimation()
 {
    $("#secondDiv").toggle(300);
 }
  </script>


 <div id='firstDiv' onclick='doAnimation()'></div>
 <div id='secondDiv' ></div>

Upvotes: 0

Related Questions