Problem when deploying html elements with toogle

0

I'm new to the forum, I'm trying to show and hide several div's that have the same class, by clicking on the icon-plus class it displays the hidden content and changes its class by icon-minus, by clicking again hides the div and returns to change to the icon-plus class, until now I have managed to do this but I have a detail, when you click on any of the div's, it shows them all, this is the code that I have, I also add that the div and the html structure I'm generating from a json.

Code that shows and hides div's

var clic = 1;

$('body').delegate('.accordion_header','click', function() {
    $('.accordion_content').slideToggle('slow');
    if(clic==1){
        $(this).find('.accordion_icon').addClass('fa-minus');
        $(this).find('.accordion_icon').removeClass('fa-plus');
        clic = clic + 1;
    }else{
        $(this).find('.accordion_icon').removeClass('fa fa-minus');
        $(this).find('.accordion_icon').addClass('fa fa-plus');
        clic = 1;
    }
});

Code generated by the html

<script>
       $(document).ready(function() {

               $.getJSON('json/bolsaTrabajo.json', function(jd) {
                    $.each(jd, function(i, item) {                        

                        $('.accordion').append('<div class="accordion_group"><div class="accordion_header"><span class="accordion_icon fa fa-plus"></span>' + item.vac + '</div><div class="accordion_content"><div class="row-fluid"><div class="span12"><table style="width: 100%;" border="0" cellpadding="0"><tbody><tr><th>FECHA</th></tr><tr><td>'+ item.fecha +'</td></tr></tbody></table></div></div><div class="row-fluid"><div class="span6"><table style="width: 100%;" border="0" cellpadding="0"><tbody><tr><th>NOMBRE DE LA VACANTE</th></tr><tr><td class="nombreDeVacante">'+item.vac+'</td></tr></tbody></table></div><div class="span6"><table style="width: 100%;" border="0" cellpadding="0"><tbody><tr><th>ESCOLARIDAD</th></tr><tr><td>'+item.esc+'</td></tr></tbody></table></div></div><table style="width: 100%;" border="0" cellpadding="0"><tbody><tr><th>CONOCIMIENTOS</th></tr><tr><td><ul>'+item.conoc+'</ul></td></tr></tbody></table><table style="width: 100%;" border="0" cellpadding="0"><tbody><tr><th>HABILIDADES / COMPETENCIAS</th></tr><tr><td><ul>'+item.habiCono+'</ul></td></tr></tbody></table><table style="width: 100%;" border="0" cellpadding="0"><tbody><tr><th>ACTIVIDADES</th></tr><tr><td><ul>'+item.act+'</ul></td></tr></tbody></table> <table style="width: 100%;" border="0" cellpadding="0"><tbody><tr><th>OFRECEMOS</th></tr><tr><td>'+item.ofre+'</td></tr></tbody></table><div class="contact-wrapper"></div></div></div>');

                    });
               });  
         });
</script>
<div class="accordion">
</div>

I would appreciate if someone helped me with this, I've been doing it for several days and I have not got it, thank you in advance

    
asked by OmaRocker 25.04.2017 в 06:00
source

1 answer

0

In this line

$('.accordion_content').slideToggle('slow');

You are displaying / hiding all the elements that have the accordion_content class.

Try changing it to

$(this).slideToggle('slow');

To only apply the operation on the clicked accordion.

    
answered by 25.04.2017 / 06:12
source