soy nuevo en el foro, estoy tratado de mostrar y ocultar varios div's que tienen la misma clase, al hacer click sobre la clase icon-plus esta despliega el contenido oculto y cambia su clase por icon-minus, al volver hacer click oculta el div y vuelve a cambiar a la clase icon-plus, hasta ahorita he conseguido hacer esto pero tengo un detalle, al hacer click en cualquiera de los div's me los depliega todos, este es el codigo que tengo, tambien agrego que los div y la estructura de html la estoy generando desde un json.
Codigo que muestra y oculta 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;
}
});
Codigo que genera el 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>
Agradeceria si alguien me ayudara con esto, llevo varios dias haciendolo y no lo he conseguido, de ante mano gracias