javascript - Collapse row on mouse click -
i found 1 example of collapsible content on internet it's unfinished.
<div class="container faq_wrapper"> <div class="row"> <div class="span10 offset1"> <p> </p> <div class="faq-all-actions"> <a class="faq-expand" onclick="jquery('.answer-wrapper').css('display','block');">expand all</a> | <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"> </div> <div class="big-q"> q</div> <div class="question"> <h6>can try software before buy it?</div></h6> <div class="answer-wrapper"> <div class="big-a"> a</div> <div class="answer"> yes! <a href="/trial">download free trial</a> , you'll have instant access features 30 days, absolutely free. don't require credit card details or commitment.</div> </div> </div> </div> </div> </div>
how can expand or hide answer example when click on row?
bind click event row , hide/show child using .find()
<style> .answer-wrapper { display: none; } </style> $(document) .on('click','.row',function(){ $(this).find('.answer-wrapper').slidetoggle(); }) ;
if bind event document, won't have worry dom changing due ajax calls or dynamic content.
Comments
Post a Comment