Geek Answers Handbook

Collapse a row with a mouse click

I found one very good example of compiled content on the Internet, but it is not finished.

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

How can I expand or hide the answer from the example when I click on a line?

+5
source share
3 answers

Bind a click event to a row and hide / show the child using .find()

 <style> .answer-wrapper { display: none; } </style> $(document) .on('click','.row',function(){ $(this).find('.answer-wrapper').slideToggle(); }) ;

http://jsfiddle.net/7bz5au97/

If you bind an event to a document, you don’t have to worry about changing the DOM due to ajax calls or dynamic content.

+1
source

You can do this even without JS using only CSS. Just look at this example:

 .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>
+3
source

use it, switch and find

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

don't forget to use if you are dynamically adding your lines:

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

More articles:


All Articles