javascript - Show Hide Functionality -
i have following button:
<a href="#" class="see-more">see more <i class="fa fa-chevron-right"></i></a> when clicked toggle div show/hide effect. got part working okay. however, realized i'm going need on multiple buttons. believe need refactor current code function, i'm not sure go here.
this started with:
// slide toggle content $(".see-more").click(function(e){ e.preventdefault(); $(".show-more").slidetoggle('slow'); if($(this).html() == 'see less <i class="fa fa-chevron-right"></i>') { $(this).html('see more <i class="fa fa-chevron-right"></i>'); } else { $(this).html('see less <i class="fa fa-chevron-right"></i>'); } }); my first attempt didn't yield luck
var seemore = $('.see-more'); function showhide() { this.preventdefault(); $(".show-more").slidetoggle('slow'); if($(this).html() == 'see less <i class="fa fa-chevron-right"></i>') { $(this).html('see more <i class="fa fa-chevron-right"></i>'); } else { $(this).html('see less <i class="fa fa-chevron-right"></i>'); } } seemore.click(showhide); edit: adding more code reference on how working (or should work)
<!-- agenda module --> <div class="row module"> <div class="small-12 columns"> <div class="radius bordered"> <img src="path-to-image" alt=""> <div class="module-content"> <h2>agenda</h2> <ul class="no-bullet agenda-list"> <li class="agenda-date">friday 11th september</li> <li><span class="agenda-time">19.00</span>welcome party</li> </ul> <ul class="no-bullet agenda-list"> <li class="agenda-date">saturday 12th september</li> <li><span class="agenda-time">09.45</span>brunch</li> <div class="show-more agenda-show"> <li><span class="agenda-time">10.10</span>meet players</li> <li><span class="agenda-time">10.30</span>driving range , puttin tuition</li> <li><span class="agenda-time">11.30</span>tee-off</li> <li><span class="agenda-time">13.15</span>lunch @ club house</li> <li><span class="agenda-time">17.00</span>end of play</li> <li><span class="agenda-time">19.30</span>drinks reception</li> <li><span class="agenda-time">21.30</span>guest speaker</li> </div> </ul> </div> <a href="#" class="see-more show-for-small">see more <i class="fa fa-chevron-right"></i></a> </div> </div> </div> <!-- end agenda module --> additional example (in example adding more rows hide/show -- not there in code, adding reference)
<li> <div class="radius bordered"> <img src="http://images.response.vodafoneglobalenterprise.com/eloquaimages/clients/vodafonegroupplc/{ab3c73da-3765-4fc5-abac-b2a9db4db779}_mod-banner-contact.png" alt=""> <div class="module-content"> <h2>get in touch</h2> <div class="row mar-bot-15"> <div class="small-12 columns"> <p>contact find out more or other events vodafone organise:</p> </div> </div> <div class="row collapse mar-bot-15"> <div class="small-3 columns text-center"> <img src="http://images.response.vodafoneglobalenterprise.com/eloquaimages/clients/vodafonegroupplc/{76cda4ed-0939-4509-bda4-10fa7307a2cf}_icn-mail.png" alt="" /> </div> <div class="small-9 columns"> <p><strong>events@vodafone.co.uk</strong></p> </div> </div> <div class="row collapse mar-bot-15"> <div class="small-3 columns text-center"> <img src="http://images.response.vodafoneglobalenterprise.com/eloquaimages/clients/vodafonegroupplc/{b8c7c4b3-9ab4-4b86-add3-c0c5b936ae41}_icn-phone.png" alt=""> </div> <div class="small-9 columns"> <p><strong>+44 (0)1635 33251</strong></p> </div> </div> </div> <div class="show-more"> <!-- hide / show content here--> </div> <a href="#" class="see-more">see more <i class="fa fa-chevron-right"></i></a> </div> </li> i can see how 1 of answers work in example .. try restructure original html ... agenda module different, slightly, other modules. "show more >" link show on mobile example.
you can restructure html, , use .prev() find closest div clicked button.
note slidetoggle work great when have single expanding div keep track of. once have multiple divs, of can expanded/contracted, should explicitly specify slideup / slidedown functions.
$(".see-more").click(function(e){ e.preventdefault(); if($(this).html() == 'see less <i class="fa fa-chevron-right"></i>') { $(this).html('see more <i class="fa fa-chevron-right"></i>'); $(this).prev(".show-more").slideup('slow'); } else { $(this).html('see less <i class="fa fa-chevron-right"></i>'); $(this).prev(".show-more").slidedown('slow'); } });.show-more{display:none;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- agenda module --> <div class="row module"> <div class="small-12 columns"> <div class="radius bordered"> <img src="path-to-image" alt=""> <div class="module-content"> <h2>agenda</h2> <ul class="no-bullet agenda-list"> <li class="agenda-date">friday 11th september</li> <li><span class="agenda-time">19.00</span>welcome party</li> </ul> <ul class="no-bullet agenda-list"> <li class="agenda-date">saturday 12th september</li> <li><span class="agenda-time">09.45</span>brunch</li> <div class="show-more agenda-show"> <li><span class="agenda-time">10.10</span>meet players</li> <li><span class="agenda-time">10.30</span>driving range , puttin tuition</li> <li><span class="agenda-time">11.30</span>tee-off</li> <li><span class="agenda-time">13.15</span>lunch @ club house</li> <li><span class="agenda-time">17.00</span>end of play</li> <li><span class="agenda-time">19.30</span>drinks reception</li> <li><span class="agenda-time">21.30</span>guest speaker</li> </div> <a href="#" class="see-more show-for-small">see more <i class="fa fa-chevron-right"></i></a> </ul> <ul class="no-bullet agenda-list"> <li class="agenda-date">sunday 13th september</li> <li><span class="agenda-time">08.30</span>breakfast</li> <div class="show-more agenda-show"> <li><span class="agenda-time">10.30</span>meet @ lobby bus</li> <li><span class="agenda-time">11.00</span>church service</li> <li><span class="agenda-time">12.30</span>bus leaves church</li> <li><span class="agenda-time">13.15</span>lunch @ club house</li> <li><span class="agenda-time">17.00</span>dinner @ club house</li> <li><span class="agenda-time">19.00</span>free evening</li> </div> <a href="#" class="see-more show-for-small">see more <i class="fa fa-chevron-right"></i></a> </ul> </div> </div> </div> </div> <!-- end agenda module -->
Comments
Post a Comment