Very good, I'm doing a boostrap menu bar and a jquery accordion dynamically. The subcategory of the boostrap bar menu would be the same as the elements shown in the accordion. The problem is that when I click on a subcategory of the menu bar, I would like the same category to be downloaded in the accordion. This could be solved if the accordion element could be displayed by name instead of by a number. I leave the two functions (Barra Manu and Acordión) in case it helps.
Bara Menu
function menuCat(){ //Funcion que muestra los enlaces de las subCategorias Correspondientes. Hace la barra de menus.
$.ajax ({
url: "php/AgrApp/grp_cat.php", //Grupo Categorias
type: "POST",
success: function(data){
objJsonCat=JSON.parse(data); //Aqui tengo el json con todas las categorias
var menuCat=
'<ul class="nav navbar-nav">';
var idSubCategoria=subMenuCat(); //Aqui tengo todas las subCategorias
$.each(objJsonCat, function(i, categoria) {
menuCat+=' <li class="dropdown">'+
'<a class="dropdown-toggle" data-toggle="dropdown"><b>'+categoria.name+'</b><b class="caret"></b></a>'+
'<ul class="dropdown-menu">';
//Aqui llamo ala funcion que me va a devolver las subcategorias de la categoria que le he pasado por parametro.
$.each(idSubCategoria, function(j, subCategoria) { //Hago un for desde 0 hasta la longitud de esa Subcategoria.
if (subCategoria.grp_cat==categoria.id){
menuCat+= '<li><a class="dropdown-toggle" data-toggle="dropdown" onClick="categorias('+categoria.id+');optAccordion(1); return false;" data-toggle="collapse" data-target="+navbar-collapse.in" ><b>'+subCategoria.name+'</b></a></li>'+ //Pinto la subCategoria
'<li role="separator" class="divider"></li>';
}
});
menuCat+='</ul>';
'</li>';
});
menuCat+=' </ul>';
$('#menuCategorias').append(menuCat); //Cierro el modal
}
});
}
This function would be what the accordion is doing.
function categorias(c){ //Esta función muestra las categorias y sus convenios, Hace el acordeon
$('#elementoCat').html(""); //Cierro el modal
var menuCateg=
'<div id="accordionn">';
var idSubCategoria=subMenuCat(c); //Aqui llamo ala funcion que me va a devolver las subcategorias
var idConvenios=lstConvenios(); //Aqui llamo ala funcion que me va a devolver los convenios, pasandole el id de la subcategoria que sera la i
$.each(idSubCategoria, function(l, subCat) {
menuCateg+= ' <h3><b>'+subCat.name+'</b></h3>'+
'<div>'+
'<div class="gallery cf">';
$.each(idConvenios, function(f, conv) {
if(conv.cat_cnv==subCat.id){
menuCateg+='<div class="col-md-3 col-sm-4 col-xs-6" data-toggle="modal" data-target="#myModal" ><center><img class="img-responsive" src="img/correcto.png" /><h5><span class="modal-title label label-default" >'+conv.name+'</span></h5></center></div>';
}
});
menuCateg+=
'</div>'+
'</div>';
});
menuCateg+=
'</div>';
$('#elementoCat').append(menuCateg); //Aqui le estoy asignando al div de convenios toda la informacion
/*Aqui empiezn algunas opciones de configuracion del acordeon*/
$("#accordionn" ).accordion({ //Declaro las opciones principales del acordeon
activate: function( event, ui ) { //Esta funcion se activa cuando desplegamos el menu, nos dice el titulo del header y del texto dentro.
},
//Aqui empiezan las opciones del acordeon
active: false,
collapsible: true,
//event: "mouseover", //Esto lo que hace es qeu se despliegue cuando el cursor pase por encima
icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" },
animate: 250,
heightStyle: "content" //Esto es para que el tamaño en altura del acordeon se ajuste al contenido
});
}
I solved it by putting an index and calling for that index, This would be the edited function.
$.each(objJsonCat, function(i, categoria) {
menuCat+=' <li class="dropdown">'+
'<a class="dropdown-toggle" data-toggle="dropdown"><b>'+categoria.name+'</b><b class="caret"></b></a>'+
'<ul class="dropdown-menu">';
//Aqui llamo ala funcion que me va a devolver las subcategorias de la categoria que le he pasado por parametro.
indice=0;
$.each(idSubCategoria, function(j, subCategoria) { //Hago un for desde 0 hasta la longitud de esa Subcategoria.
if (subCategoria.grp_cat==categoria.id){
menuCat+= '<li><a class="dropdown-toggle" data-toggle="dropdown" onClick="categorias('+categoria.id+');optAccordion('+indice+'); return false;" data-toggle="collapse" data-target="+navbar-collapse.in" ><b>'+subCategoria.name+'</b></a></li>'+ //Pinto la subCategoria
'<li role="separator" class="divider"></li>';
indice++;
}
});
menuCat+='</ul>';
'</li>';
});