Destroy the previous function by clicking on another button

Navigation
1

I have a list of products with a loop, which has a button called see details. When I click on "See details" it opens in toggle mode the div with the details of the product. When I click on the other product, the same thing happens and it is placed on top. and I can see it, So all right but when I realize the previous div has not left, and what I need is that by clicking on the button "Verdetalles" of the other product, the previous one is hidden and the other appears as all toggle Does anyone have an idea of how I can do it? 

           <div class="colum-img col-xs-12 col-md-9">
                    <h1>FORMATERÍA</h1>
                    <hr>
                        <?php
                            while($fila=mysql_fetch_array($resultado)){
                        ?>
                            <div class="inner-producto col-xs-12 col-sm-6 col-md-4">
                                <div class="producto_container ">
                                    <div class="producto_img">
                                        <div class="img"><img src="<?php echo"$fila[ruta]"; ?>" class="img-responsive">
                                        </div>
                                    </div>
                                    <div class="kind">
                                        <h6><?php echo"$fila[nombre]" ?></h6>
                                        <hr>
                                    </div>

                                    <div class="informacion">
                                        <p class="info_pro col-md-6" id="<?php echo $fila[ind];?>">VER DETALLES</p>
                                        <p class="icon_call col-md-6">
                                            <a href="tel:013095009"><i class="fa fa-phone"></i></a>
                                            <a href="mailto:[email protected]"><i class="fa fa-envelope-o"></i></a>
                                        </p>
                                    </div>
                                    <div id="enlace<?php echo $fila[ind];?>" class="detalles_p detalles_p<?php echo $fila[ind];?>">
                                        <i class="close-detalles fa fa-close"></i>
                                        <div class="detalle_img">
                                            <img src="<?php echo"$fila[ruta]"; ?>" class="img-responsive">
                                        </div>
                                        <div class="detalles_info">

                                            <h4><?php echo"$fila[nombre]" ?></h4>
                                            <hr>
                                            <p><i class="detalle_item">MATERIAL:</i><?php echo"$fila[material]" ?></p>
                                            <p><i class="detalle_item">CANTIDAD:</i><?php echo"$fila[cantidad]" ?></p>
                                            <p><i class="detalle_item">IMPRESIÓN:</i><?php echo"$fila[impresion]" ?></p>
                                            <p><i class="detalle_item">TAMAÑO:</i><?php echo"$fila[tamano]" ?></p>
                                            <p><i class="detalle_item">PRESENTACIÓN:</i><?php echo"$fila[presentacion]" ?></p>
                                            <p><i class="detalle_item">SERVICIO DE ENTREGA:</i><?php echo"$fila[servicio]" ?></p>
                                        </div>
                                        <div class="detalles_bn">
                                        <a href="tel:013095009">Llama al proveedor <i class="fa fa-phone"></i></a>
                                        <a href="mailto:[email protected]">Solicitar cotización <i class="fa fa-envelope-o"></i></a>
                                        <p>"SpamBot Automatic: Opps!!, Este servicio borra automáticamente todos los correos de servidores
                                        gratuitos, por lo que agradeceremos enviar su requerimiento desde su correo corporativo."</p>
                                        </div>
                                    </div>
                                </div>


                            </div>

                        <?php
                            }
                        ?>

                </div>

And this is my Jquery 

$(".info_pro").click(function(){
            $(".info_pro").addClass('btn_activo');
            var href= $(this).attr('id');
            $("#enlace"+ href).animate({
                width:"toggle"
            });
            $(".detalles_p"+ href).addClass('activo');

        });

$(".btn_activo").click(function(){
    var href= $(this).attr('id');
        $("#enlace"+ href).animate({
            width:"hide"
        });
});
    
asked by Karlos Yalta 12.03.2018 в 22:30
source

1 answer

1

Inside $ (".info_pro"). click () add the first line to remove the 'active' class from the other objects 

$(".detalles_p").removeClass('activo'); // añades esta
$(".detalles_p"+ href).addClass('activo');

EDIT:

Looking at your code well, when you click on a button '.info_pro' you are placing the class 'btn_active' to all the buttons with that class, should this work? And to add that since you are adding that class in an event after loading the js file, the event $ (". Btn_active"). Click () never executes. This way it could be corrected (combining both events): 

$('.info_pro').click(function(){
    if($('.btn_activo').length){ //para comprobar si hay algun boton activo
        var hidehref= $(this).attr('id');
        $("#enlace"+ hidehref).animate({width:"hide"});
        $('.info_pro').removeClass('btn_activo');
    }
    $(this).addClass('btn_activo'); // solamente al botón que se le dio click
    var href= $(this).attr('id');
    $("#enlace"+ href).animate({width:"toggle"});
    $('.detalles_p'+ href).addClass('activo');
});
    
answered by 12.03.2018 в 22:58
get id after inserting a record in sqlserver How to capture a selected item from a combobox filled from a BD