Open item accodion by name

0

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>';
            });
    
asked by Lorenzo Martín 12.02.2018 в 10:20
source

0 answers