jQuery Simple Plegable Div?

Question

Busco el pequeño simple código adecuado, para hacer las siguientes cosas:

• Haga clic sobre el factor con la clase que se le aplica.

• DIV.CLASS - Que se expande y muestra contenido oculto. (slideDown - Toggle)

• DIV.CLASS - Que colapsa y oculta el contenido mostrado anteriormente. (SlideUp - Alternar)

He creado una jsFiddle aquí: http://jsfiddle.net/Q4PUw/1/

Así que para ser vago y fácil, lo que necesita saber cómo conseguir un div class para convertirse oculta y visible una vez que un elemento de la misma página tiene una CLASE aplicada, en la que se activaría y desactivaría el Contenido HIDDEN y/o el Contenido HTML VISIBLE. Y necesito que esté oculto por defecto.

He buscado en Internet y solo he encontrado scripts muy complejos, pero nada simple. He encontrado Acordeones simples ... Pero esos que nunca se cierran, simplemente abren otro.

Gracias a todos por la ayuda y espero que yo sea capaz de responder a esta misma pregunta para un montón de otras personas ...

Nota: Sé muy poco de JavaScript y jQuery o incluso.

Answer 1

$('.expand-one').click(function(){ 
    $('.content-one').slideToggle('slow'); 
}); 

Demostración: http://jsfiddle.net/Q4PUw/2/

Answer 2

yo estaba buscando en esto y quería un div plegable que ya se había labrado para mí. Entonces me di cuenta de que lo que quería era un acordeón jquery-ui de un solo panel.

<div id="collapse"> 
    <h3>Collapse and Expand</h3> 
    <div>Content</div> 
</div> 
<script> 
$("#collapse").accordion({ 
    collapsible: true, 
    active: false 
}); 
</script> 

http://jsfiddle.net/MB4ch/1/

Answer 3

que quería hacer esto con varias Div, cada uno con su propio gatillo. Sobre la base de la respuesta de AlienWebguy arriba:

HTML

<div> 
    <p class="expand" id="expand-1">more 1...</p> 
</div> 
<div class="expandable" id="expandable-1"> 
    <p>1. This is the content that was hidden before, but now is... Well, visible!"</p> 
</div> 
<div> 
    <p class="expand" id="expand-2">more 2...</p> 
</div> 
<div class="expandable" id="expandable-2"> 
    <p>2. This is the content that was hidden before, but now is... Well, visible!"</p> 
</div> 

Javascript

$('.expand').click(function(){ 
    target_num = $(this).attr('id').split('-')[1]; 
    content_id = '#expandable-'.concat(target_num); 
    $(content_id).slideToggle('fast'); 
}); 

CSS

.expand { 
    font-weight: bold; 
    font-style: italic; 
    font-size: 12px; 
    cursor: pointer; 
} 
.expandable { 
    display:none; 
} 
div { 
    margin: 10px; 
} 

https://jsfiddle.net/Q4PUw/3767/

Answer 4

mala idea para nosotros e acordeón. Mejor es crear su propio bloque colapsable.

Ejemplo:

function InitSpoilBlock(idClicked) 
    { 
     $(idClicked).on('click', function(e){ 
      var textArray = ['blind','slide'];//here you can add other effects 

      var randomEffect = textArray[Math.floor(Math.random()*textArray.length)]; 

      $(e.target).parent().children(".HiderPanel").toggle(randomEffect); 
     }); 
    } 

por lo que cuando se escribe como html:

<div class="HiderContainer"> 
    <a href="#" class="Hider">More</a> 
    <div class="HiderPanel"> 
     Spoiled block of html 
    </div> 
</div> 

y después de la carga de la página que se llama

InitSpoilBlock('.Hider'); 

todos los bloques serán posibles a colapsar y ocultar con animación aleatoria. O puede usar una animación exacta también.