1

Les comento, estoy armando 3 filas con dos divs cada una, las cuales contienen botones que muestran información al hacer click sobre ellos.

Lo que quiero es que tengan un efecto como "slideDown", logrando que al apretar un botón, se muestre su información y al volverlo a apretar, se oculte. Por otro lado, quisiera que cuando hay uno abierto, y se hace click en otro botón, se oculte la información que estaba visible del botón activo y se muestre la información del otro que se activó.

No he logrado conseguirlo, y con lo único que me he quedado es con el "toggle" tradicional.

Les muestro el código de una de las filas, las otras 2 son del mismo estilo:

HTML:

<row class="col-xs-12" id="row1">

    <?php

        $item = null;
        $valor = null;

        $categorias = ControladorProductos::ctrMostrarCategorias($item, $valor);

        foreach ($categorias as $key => $value) {

            if ($value["categoria"] == "CLÁSICO") {

            echo '<div class="col-xs-6 btnCategoriasMobile" id="btnClasico">

                    <button class="btn btn-default backColor btn-block btnCategoriasMobile">
                                                <a class="pixelCategorias">'.$value["categoria"].'</a>

                    </button>

                    <div id="subcatClasico"';

                    $item = "id_categoria";

                    $valor = $value["id"];

                    $subcategorias = ControladorProductos::ctrMostrarSubCategorias($item, $valor);

                    foreach ($subcategorias as $key => $value) {

                            echo '<li><center><a href="'.$url.$value["ruta"].'" class="pixelSubCategorias">'.$value["subcategoria"].'</a></center></li>';
                        }   

                    echo '</div>
                    </div>';

            } else if ($value["categoria"] == "LIGHT") {

            echo '<div class="col-xs-6 btnCategoriasMobile" id="btnLight">

                    <button class="btn btn-default backColor btn-block btnCategoriasMobile">
                        <a class="pixelCategorias">'.$value["categoria"].'</a>

                    </button>

                    <div id="subcatLight"';

                    $item = "id_categoria";

                    $valor = $value["id"];

                    $subcategorias = ControladorProductos::ctrMostrarSubCategorias($item, $valor);

                    foreach ($subcategorias as $key => $value) {

                            echo '<li><center><a href="'.$url.$value["ruta"].'" class="pixelSubCategorias">'.$value["subcategoria"].'</a></center></li>';
                        }   

                    echo '</div>
                    </div>';

            }

        }

    ?>

</row>

JS:

$("#btnClasico").click(function(){
    $("#subcatClasico").toggle();
 });

$("#btnLight").click(function(){
    $("#subcatLight").toggle();
 });

$("#btnSodio").click(function(){
    $("#subcatSodio").toggle();
 });

$("#btnFibras").click(function(){
    $("#subcatFibras").toggle();
 });

$("#btnVeggie").click(function(){
    $("#subcatVeggie").toggle();
 });

$("#btnCombos").click(function(){
    $("#subcatCombos").toggle();
 });

Así es como se ven las 3 filas con los 2 botones cada una:

introducir la descripción de la imagen aquí

1 respuesta 1

2

Voy a tomar un de las funciones click que tienes asociadas a tus botones para que nos sirva de ejemplo. Lo que voy a hacer en ella es lo que tendrías que hacer en todas.

JQUERY

$("#btnClasico").click(function(){
    $('.claseQueCompartanTusDesplegables').not('#subcatClasico').slideUp(); //Para esconder la información de todos los botones, para que nunca haya dos informaciones abiertas a la vez.
    $("#subcatClasico").slideToggle(); //Es como el .toogle() pero con una animación chula.
});

Con eso deberías conseguir el efecto deseado. Realmente estabas bastante cerca de conseguirlo, tan solo te quedaba el haber dado con la manera de que solamente haya una información desplegada a la vez.

3
  • Muchas gracias! Me ha servido casi al completo. He hecho lo que me has dicho, y funciona todo excepto que si quiero abrir y cerrar un mismo botón, se vuelve a abrir. Commented el 11 ene. 2019 a las 13:28
  • Modifiqué la tercera línea de mi código añadiendo la función not() para que cierre todos las informaciones salvo la asociada al botón que se pinche. De esta manera debería de corregirse el problema que me comentas.
    – phpMyGuel
    Commented el 11 ene. 2019 a las 13:42
  • Gracias! Funciona a la perfeccion ahora Commented el 11 ene. 2019 a las 13:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.