Toggle

homework
jquery

#1
$(document).ready(function () {

    var myUrl = "http://medieinstitutet-wie-products.azurewebsites.net/api/products/";

    $.getJSON(myUrl, function (data) {

            var container = $("<div>").addClass("row container");
            $(container).appendTo("body");

            for (var i = 0; i < data.length; i++) {

                var productProp = $("<div>").addClass("col-xs-6 col-sm-4 col-md-2 productProp");
                $(container).append(productProp);

                var thumbnail = $("<img>").attr("src", data[i].imageUrl).attr("id", data[i].id).addClass("thumbnail");
                $(productProp).append(thumbnail);

                var title = $("<p>").text(data[i].name).addClass("title");
                $(productProp).append(title);
                
                var productDetails = $("<div>").addClass("productDetails").css("display", "none");
                $(productProp).append(productDetails);
                
                var summary = $("<p>").text(data[i].description).addClass("summary");
                $(productDetails).append(summary);
                
                var year = $("<p>").text(data[i].year).addClass("year");
                $(productDetails).append(year);
                
                var price = $("<p>").text(data[i].price).addClass("price");
                $(productDetails).append(price);

                $(thumbnail).click(function () {
                    var productId = $(this).attr("id");

                    $.getJSON(myUrl + productId, function (details) {
                    
                        
                 $("#productProp").click(function(){
                 $(".productDetails").toggle(function (){
                  $(this).removeClass("display","none");

                });
            });  

          Until here i can  ... Any thoughts on how I would be able to toggle the div with the class "productDetails" when click on a matching thumbnail?
                 
                               
                    });
                });

            }
        },
        function () {
            alert("Error");
        });
    
    
});

#2
$('.productProp').click(function(){
$(this).children('.productDetails').toggle();
});

#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.