javascript - w3schools - jQuery simple plegable div?

removeattr css jquery

Question

Estoy buscando el código apropiado, simple y pequeño para hacer lo siguiente:

• Haga clic en Elemento con clase aplicada.

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

• DIV.CLASS - Que colapsa y oculta el contenido de la presentación anterior. (slideUp - Toggle)

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

Entonces, para ser vago y fácil, necesito saber cómo lograr que una CLASE DIV se oculte y sea visible una vez que un elemento en la misma página tenga una CLASE aplicada, en la cual se activaría y desactivaría el Contenido HIDDEN y / o VISIBLE HTML. Y necesito que esté oculto por defecto.

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

Gracias a todos por la ayuda y espero poder responder esta misma pregunta a muchas otras personas ...

Nota: Conozco muy poco JavaScript e incluso jQuery.

Answer 1

Estaba mirando esto y quería un div plegable que ya estaba diseñado para mí. Entonces me di cuenta de que lo que quería era un acordeón de un solo panel jQuery-ui.

<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 2

Mala idea usar el acordeón. Mejor es crear tu propio bloque plegable.

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);
});
}

así que cuando escribes tal html:

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

y después de cargar la página llamarás

InitSpoilBlock(''.Hider'');

Todos los bloques serán posibles de colapsar y ocultar con animación aleatoria. O puedes usar una animación exacta también.

Answer 3

Quería hacer esto con múltiples divs, cada uno con su propio disparador. Sobre la base de la respuesta de AlienWebguy anterior:

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

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

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