Javascript: Expandir / Contraer Múltiples del DIV con un simple código?

Tengo varios DIVs en mi página que me gustaría ser capaz de expandir /contraer. Estoy utilizando el siguiente código para hacerlo, pero sólo se aplica a toda una clase.. puedo aplicarlo a lo que se hace clic? (por ejemplo, auto.slideToggle();)

//Activate Toggle for Showing /Hiding More Price Tables
        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    return false;
    });

});

EDIT: Aquí está un ejemplo de lenguaje:

<a href="#" class="show_hide">Video & Music</a>
    <div class="slidingDiv">CONTENT HERE</div>

OriginalEl autor Zakman411 | 2011-08-24

4 Kommentare

  1. 2

    Este trabajo.

    $('.show_hide').click(function(){
          $(this).next('.slidingDiv').slideToggle();
          return false;
    });

    jsfiddle – http://jsfiddle.net/ABrunkhorst/vFnqp/1/

    Editado para mostrar marcas. Que el código que has mencionado hecho los DIVs que desaparezcan para siempre jaja
    Editado para adaptarse a su marca.
    Gracias! Funcionó a la perfección
    Me alegro de haber ayudado 🙂

    OriginalEl autor Austin Brunkhorst

  2. 1

    uso $(this) dentro del evento click.

    o si hace clic en algo en el div, a continuación, algo así como la palabra clave principal.

    así $(this).parent(".slidingDiv").slideToggle();

    editar

    usted podría pensar también en el uso de este, basado en su edición;

    $(this).next('.slidingDiv')

    OriginalEl autor griegs

  3. 1

    Utilizando $(this) en el interior de la llamada a la función se hará referencia al objeto en el ámbito de aplicación, en este caso el que se hace clic.

    $('.show_hide').click(function(){
       $(this).next('.slidingDiv').slideToggle();
       return false;
    });

    Lugar de next() puede considerar:

    • children()seleccionar sólo el primer nivel de los niños
    • contents()si usted está tratando de llegar a todos los descendientes (hijos + los niños de los niños) del elemento de que se hace clic
    • siblings()para obtener todos los elementos que están en el mismo nivel en el árbol de jerarquía
    • prev()para obtener el hermano anterior
    • next()para obtener el primer hermano
    • prevAll()para obtener todos los anteriores hermanos
    • nextAll()para obtener todos los hermanos
    • parents()para obtener el anscestors (contenedores) de la clic elemento
    gracias por la respuesta, pero esto no funciona… los DIVs no expandir o contraer en todos los
    Zakman411: el marcado era limitado y la sangría hace que parezca que el div anidados, usted debe limpiar su margen de utilidad. He revisado la respuesta anterior, pero usted debe tener una lista completa de marcas de

    OriginalEl autor vol7ron

  4. 0

    Podemos hacer uso de la interfaz de usuario JQUERY Accordion con la que podemos alternar de manera eficiente.
    Debemos añadir la siguiente JQuery enlaces

       <script src="//code.jquery.com/jquery-1.10.2.js"></script>
       <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <script>  $(function() {   
        $( "#accordion" ).accordion(); 
        });  
       </script> 
       <div id="accordion"> 
       <h3>Section 1</h3>
       <div>   
       <p>This is division 1  
       </p></div>  
       <h3>Section 2</h3>
       <div>
       <p>This is division2</p></div>

    Para obtener más detalles, Consulte este http://jqueryui.com/accordion/

    OriginalEl autor Deepak Kothari

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea