Jquery Show Hide Each Div Onclick

I have a dynamic number of divs which generated through asp.net. I need to show each div contents by clicking on its header. I have tried this { $(function () { var my

Solution 1:

The problem was how you were finding the content to be displayed/hidden. You need to find the content related to the clicked header you the code var myBody = $(myHead).parent().find(".toggle-content"); should go inside the click handler as var myBody = $(this).next()

 $(function () {
     var myHead = $(".toggle-container .toggle-header");
     $(myHead).click(function () {
         var myBody = $(this).next()
         if ($(myBody).css('display') === 'none') {
             $(this).children('i').removeClass('icon-chevron-sign-down').addClass('icon-chevron-sign-up');
             $(this).parent().find(".toggle-content").slideDown("slow");
         } elseif ($(myBody).css('display') === 'block') {
             $(this).children('i').removeClass('icon-chevron-sign-up').addClass('icon-chevron-sign-down');
             $(this).parent().find(".toggle-content").slideUp("slow");

         };
     });
 });

Demo: Fiddle

Note: Still the up-down arrows are nor working because you need to use find() instead of children()

But it can be simplified as

jQuery(function ($) {
    var$heads = $(".toggle-container .toggle-header");
    $heads.click(function () {
        var$this = $(this);
        $this.find('i').toggleClass('icon-chevron-sign-down icon-chevron-sign-up');
        $this.next().slideToggle("slow");
    });
});

Demo: Fiddle

Solution 2:

The below would work.

In your original code you had assigned the variable myBody a value at the time of load itself. Since there are many such elements, it used only the first one.

Now I have moved the value setting for the myBody variable to be inside the click event and used $(this). This will make sure that it always finds the element in relation to the current element that was clicked.

 $(function () {
     var myHead = $(".toggle-container").find(".toggle-header");
     $(myHead).click(function () {
         var myBody = $(this).parent().find(".toggle-content");         
         //console.log('yes');if ($(myBody).css('display') === 'none') {
             $(this).children('i').removeClass('icon-chevron-sign-down').addClass('icon-chevron-sign-up');
             $(this).parent().find(".toggle-content").slideDown("slow");
         } elseif ($(myBody).css('display') === 'block') {
             $(this).children('i').removeClass('icon-chevron-sign-up').addClass('icon-chevron-sign-down');
             $(this).parent().find(".toggle-content").slideUp("slow");

         };
     });
 });

Fiddle Demo