Question

I am looking for a way to append $.post()‘s data response to the height of the li that invoked it.

I know it has been done, but I can’t find anything to read about it. So, any ideas?

Scheme

• List item1

• List item2

• List item3, on click here :

                        * sublist item1
                        * sublist item2
                        * sublist item3
  

• List item4

UPDATE

The only code I have is the working $.post() and I do a console.log(data) just to see the response.

Ok, I would like to achieve something like this: http://www.alistapart.com/d/horizdropdowns/horizontal.htm with the $.post()‘s response

Answer 1

$('li.clickable').on('click', function() {
  var list = $(this);
  $.ajax({
      url: 'url_to_script',
      method: 'post',
      success: function(res) {

         var response = $(res); // assume that you response contains li tags i.e '<li>subitem 1</li>' and more
         list.append(response); // append response to list that clicked

         /* >> OR  << */
         // if you response contains data as array/field
         $.each(res, function(index, data) {
            list.append('<li>'+ data['some_text'] +'</li>'); // some_text is assumed property, you have something else
         });

        // ACCORDING TO YOUR COMMENT
        var sublist = '<ul>';
        $.each(res, function(index, data) {
            sublist += '<li>'+ data['some_text'] +'</li>'; // some_text is assumed property, you have something else
         });
            sublist += '</ul>'; // now sublist is like <ul><li>...</li>....</ul>
        list.append(sublist); // append the sublist to ul.clickable
      }
  });
});

NOTE: You have to make some CSS to improve looks