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