Comprimi riga con il clic del mouse

Question

Ho trovato un ottimo esempio di contenuto comprimibile su Internet, ma è incompleto.

<div class="container faq_wrapper"> 
    <div class="row"> 
     <div class="span10 offset1"> 
      <p> 
       &nbsp;</p> 
      <div class="faq-all-actions"> 
       <a class="faq-expand" onclick="jQuery('.answer-wrapper').css('display','block');">Expand All</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class="faq-collapse" onclick="jQuery('.answer-wrapper').css('display','none');">Collapse All</a></div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="span10 offset1"> 
      <div class="question-wrapper"> 
       <div class="arrow"> 
        &nbsp;</div> 
       <div class="big-q"> 
        Q</div> 
       <div class="question"> 
        <h6>Can I try the software before I buy it?</div></h6> 
       <div class="answer-wrapper"> 
        <div class="big-a"> 
         A</div> 
        <div class="answer"> 
         Yes! Simply <a href="/trial">download a free trial</a> and you&#39;ll have instant access to all features for 30 days, absolutely free. We don&#39;t require your credit card details or any commitment.</div> 
       </div> 
      </div>  
     </div> 
    </div> 
</div> 

Come posso espandere o nascondere la risposta dell'esempio quando faccio clic sulla riga?

Answer 1

associare un evento click sulla riga e nascondere/mostrare la bambino utilizzando .find()

<style> 
    .answer-wrapper { 
     display: none; 
    } 
</style> 

$(document) 
    .on('click','.row',function(){ 
     $(this).find('.answer-wrapper').slideToggle(); 
    }) 
; 

http://jsfiddle.net/7bz5au97/

Se si associa l'evento al documento, non sarà necessario preoccuparsi della modifica del DOM a causa di chiamate Ajax o contenuti dinamici.

Answer 2

uso questo, a levetta e trovare

$('.row').click(function(){ 
    $(this).find('.answer-wrapper').toggle(); 
}) 

non dimenticate utilizzare su se si sta aggiungendo le righe in modo dinamico:

$('.row').on('click',function(){ 
    $(this).find('.answer-wrapper').toggle(); 
}) 

Answer 3

È possibile farlo anche senza JS utilizzando solo CSS. Basta vedere questo esempio: ('fila')

.collapsible > .item { 
 
    display: block; 
 
    cursor: pointer; 
 
    margin: 5px; 
 
} 
 
.collapsible > .item > .row { 
 
    display: block; 
 
    background: #bbb; 
 
    padding: 5px; 
 
} 
 
.collapsible > .item > .content { 
 
    display: none; 
 
    background: #ddd; 
 
    padding: 5px; 
 
} 
 
.collapsible > .item > input[type=checkbox] { 
 
    display: none; 
 
} 
 
.collapsible > .item > input[type=checkbox]:checked + .content { 
 
    display: block; 
 
}

<div class="collapsible"> 
 
    <label class="item"> 
 
    <span class="row">Row 1</span> 
 
    <input type="checkbox" /> 
 
    <span class="content">Content 1</span> 
 
    </label> 
 
    <label class="item"> 
 
    <span class="row">Row 2</span> 
 
    <input type="checkbox" /> 
 
    <span class="content">Content 2</span> 
 
    </label> 
 
    <label class="item"> 
 
    <span class="row">Row 3</span> 
 
    <input type="checkbox" /> 
 
    <span class="content">Content 3</span> 
 
    </label> 
 
</div>