i have written simple accordion script works great, want refactor rid of multiple `$(this).find.
i know pretty slim hate repeating myself, ideas? best way learn ask suppose.
thanks!
$.fn.acaccordion = function () { $(this).find(".accordion-toggle .acc-state").show(); $(this).find(".accordion-content").hide(); $(this).find(".show").show(); $(this).find(".show").next().show(); $(this).find('.accordion-toggle').click(function(){ if($(this).next().is(":hidden")) { $(this).next().slidetoggle('fast'); $(".accordion-content").not($(this).next()).slideup('fast'); } }); }; $(".accordion").acaccordion();body { font-size:16px; font-family:sans-serif; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="accordion"> <div class="accordion-toggle show"><span class="accordion-title">accordion 1</span></div> <div class="accordion-content"> <p>cras malesuada ultrices augue molestie risus.</p> </div> <div class="accordion-toggle"><span class="accordion-title">accordion 2</span></div> <div class="accordion-content"> <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum </p> </div> <div class="accordion-toggle"><span class="accordion-title">accordion 3</span></div> <div class="accordion-content"> <p>vivamus facilisisnibh scelerisque laoreet.</p> </div> </div>
i chained calls, removed excess check , calls, reverted order of actions
$.fn.acaccordion = function () { $(this).find('.accordion-toggle') .click(function() { $(this) .next().slidedown('fast') .siblings('.accordion-content').slideup('fast'); }) .not('.show').next().hide(); }; $(".accordion").acaccordion();body { font-size:16px; font-family:sans-serif; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="accordion"> <div class="accordion-toggle show"><span class="accordion-title">accordion 1</span></div> <div class="accordion-content"> <p>cras malesuada ultrices augue molestie risus.</p> </div> <div class="accordion-toggle"><span class="accordion-title">accordion 2</span></div> <div class="accordion-content"> <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum </p> </div> <div class="accordion-toggle"><span class="accordion-title">accordion 3</span></div> <div class="accordion-content"> <p>vivamus facilisisnibh scelerisque laoreet.</p> </div> </div>
Comments
Post a Comment