CODEWITHSUNDEEP
javascriptjquery
Pawan
Pawan

Reputation: 32321

How to open and close a div if its clicked on Twice

This is my jsfiddle

http://jsfiddle.net/1ty1v8u1/5/

If an element is clicked on twice , how can i achieve toggle behavior for that particular div ?

If i click on office twice in the jsfiddle how to make it open and close ??

This is my code 

function showRestaurantDetailsByLocation(response,locationname)
{
    $('.restListings').remove();
    $('.addNewRestaurant').remove();
    var ulhtml = $('<ul class="restListings"></ul>');
    var divhtml = $('<div class="inner-intit"><sub class="sub">Your Favorite Area</sub></div>');
    divhtml.append('<br>');
    var $newbutton= $('<input/>').attr({ type: 'button', location:locationname , name:'btn1', class:'btn btn-success addNewRestaurant', value:locationname});
    for(var i=0;i<response.length;i++)
    {
        divhtml.append('<li><h6>'+response[i].area+'</h6><p>'+response[i].address+'</p><span id="delete" class="inDelete inDeleteSub"></span></li>');
    }
    divhtml.append($newbutton); 
    ulhtml.append(divhtml);
    $("#"+locationname).append(ulhtml);
}

Upvotes: 0

Views: 139

Answers (1)

Milind Anantwar
Milind Anantwar

Reputation: 82231

You are appending the new elements on click. Just check for previously appended element in same div. If it exist then simply remove it, if not then add new:

 $(document).on('click', '.lielement', function() {
   var locationname = $(this).attr("id");
   if($(this).find('.restListings').length)
     $(this).find('.restListings').remove()
   else
     displayingRestaurantByArea(locationname);
 });

Working Demo

Upvotes: 2

Related Questions