jQuery: Make a div and show it with sliding

Question

I wanna make a div '.row list' and show it with sliding using slideToggle when user clicks div '.day'.

However, it doesn't work with just adding slideToggle event.

How can I do that?

function getDailyList(el){
    var insert_text = "";
    var id = el.attr("id");
    $.ajax({
        url: "/getDailyList",
        dataType: 'JSON',
        success: function(data){
            insert_text = '<div id="'+ id +'" class="row list">'
                +'<div class="col-md-8 col-md-offset-2" style= "border: 1px solid gold; background-color: black; padding: 10px">';
            if(data.event_list.length == 0){  
            return false              
            }
            else{
                for(var idx in data.event_list){
                    event_ = data.event_list[idx];
                    insert_text += '<p class="text-left" style="color: white">' + event_['title'] + '</p>';
                }
            }
            insert_text += '</div></div>';
            $(insert_text).insertAfter($(el.parents('.row')));
            return false;
        }
    });
}    

$(document).ready(function(){
    $('.day').click(function(){
        console.log('-------');

        if($(this).parents('.row').next().attr("id") == $(this).attr("id")){
            $(this).parents('.row').next().remove(); 
        }
        else{
            $(".list").remove();
            getDailyList($(this));
        }
    });
})

Answer 1

Make sure the div or in your case the row class is not displayed first and use an onclick event to toggle it.

Demo

http://jsfiddle.net/dabvgp2L/

<input type="button" id="clickme" value=Click here /">

#show {
display: none;
margin-top:20px;
}

<div id="show">
<a>Hello</a>
</div>

$(document).on("click", "#clickme", function() {
$("#show").slideToggle();
});