jQuery Simple Collapsible Div?

Question

Sto cercando per la corretta, semplice, piccolo codice per fare le seguenti cose:

• Cliccare sulla Elemento con classe applicato ad esso.

• DIV.CLASS - che espande e mostra il contenuto nascosto. (slideDown - Toggle)

• DIV.CLASS - Che comprime e nasconde il contenuto precedente. (SlideUp - Toggle)

Ho creato un jsFiddle qui: http://jsfiddle.net/Q4PUw/1/

Quindi, per essere vaghi e facile, ho bisogno di sapere come ottenere un div class di diventare nascosto e visibile una volta un elemento su alla stessa pagina è stata applicata una CLASSE, in cui si attiva e disattiva il contenuto HTML NASCOSTO o VISIBILE. E ho bisogno che sia nascosto di default.

Ho cercato su Internet e ho trovato solo script molto complessi, ma niente di semplice. Ho trovato semplici Accordians ... Ma quelli non si chiudono mai, ne aprono solo un altro.

Grazie a tutti per l'aiuto e spero che io possa essere in grado di rispondere a questa stessa domanda per un sacco di altre persone ...

Nota: so molto poco JavaScript e jQuery o addirittura.

Answer 1

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

Demo: http://jsfiddle.net/Q4PUw/2/

Answer 2

stavo guardando questo e volevo un div pieghevole che è stato già designato per me. Poi ho capito che volevo una singola fisarmonica 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 3

Ho voluto fare questo con più div, ognuno con la propria trigger. Sulla risposta di AlienWebguy sopra:

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

cattiva idea di noi e fisarmonica. È meglio creare il proprio blocco comprimibile.

Esempio:

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

in modo che quando si scrive ad esempio HTML:

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

e dopo il caricamento della pagina si chiama

InitSpoilBlock('.Hider'); 

tutti i blocchi sarà possibile collasso e nascondersi con animazione casuale. Oppure puoi anche usare un'animazione esatta.