css - improve jquery accordion and remove bug -
i have attempted extend on accordion sharepoint faq , have working wont see if there more effective way complete. please forgive me if seems simple, have started jquery , still rapping head around awesome framework.
the text fades in , out ok. thinking of slidein/slide out effect that's can work on latter.
there issue css believe rows jump down when text fadesin.
also notice if leave bottom on text not fade out , when mouseenter fade out , in. code have makes sense not sure of better way it.
really appreciate assistance and/or advice. site has been helpful development work.
here link code link working example
html
<html lang="en"> <head> <meta charset="utf-8" /> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript" src="accordion.js"></script> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <title>fade</title> </head> <body> <ul style="width:100%" class="accordion"> <li class="accordion-item"> <div class="accordion-header">audit</div> <div class="accordion-description">timelines, & involved</div> <div class="accordion-content" style="display: none;"> <div>not sure involves world , aliens....</div> </div> </li> <li class="accordion-item"> <div class="accordion-header">archiving</div> <div class="accordion-description">how to/when to/what archive</div> <div class="accordion-content" style="display: none;"> <div>archive everything, no such thing many backups</div> </div> </li> <li class="accordion-item"> <div class="accordion-header">annual leave</div> <div class="accordion-description">check how annual leave have and/or entitled to, find forms</div> <div class="accordion-content" style="display: none;"> <div>forms awesome , in intranet</div> </div> </li> <li class="accordion-item"> <div class="accordion-header">accommodation</div> <div class="accordion-description">how book accommodation</div> <div class="accordion-content" style="display: none;"> <div>wotif or sweet talk you</div> </div> </li> </ul> </body> </html> css
body { margin: auto; width: 960px; padding: 10px; } ul.accordion { list-style:none; margin:0px; padding:0px; } .accordion-item { border-top:1px solid #ccc; } .accordion-header { font-size:1.2em; font-weight:bold; cursor:pointer; padding-top:10px; } .accordion-description { bottom: 25px; font-style: italic; left: 300px; margin-bottom: -12px; position: relative; text-align: right; width: 600px; } .accordion-header:hover { background:#efefef; } .accordion-header.expanded { background:#dfdfdf; } .accordion-content { padding:20px; } .expand-all, .collapse-all { display:inline-block; cursor:pointer; padding:5px 10px; } .expand-all:hover, .collapse-all:hover { background:#efefef; } jquery
function accordionload() { $(".accordion-header").removeclass("expanded"); $(".accordion-content").hide(); $(".accordion-header").bind("click", function(){ $(this).toggleclass("expanded"); $(this).siblings(".accordion-content").slidetoggle(); }) $('.accordion-description').hide(); $('.accordion-item').on('mouseenter', function () { // $(this).next().siblings $('.accordion-description').fadeout(); $(this).find('.accordion-description').fadein(); }); $(".expand-all").bind("click",function(){ $(this).siblings(".accordion").find(".accordion-content").slidedown(); $(this).siblings(".accordion").find(".accordion-header").addclass("expanded"); }) $(".collapse-all").bind("click",function(){ $(this).siblings(".accordion").find(".accordion-content").slideup(); $(this).siblings(".accordion").find(".accordion-header").removeclass("expanded"); }) } $(document).ready(function(){ accordionload(); });
you can achieve css (fiddle). because it's simple hover don't need jquery. can add additional css3 transitions fade-in effect.
added hover on item element:
.accordion-item:hover .accordion-description { -transition: opacity .7s ease-in-out; -moz-transition: opacity .7s ease-in-out; -webkit-transition: opacity .7s ease-in-out; opacity: 1; visibility:visible; } put description before header element because of float: right
<div class="accordion-description">timelines, & involved</div> <div class="accordion-header">audit</div> changed styles on description element , set invisible default:
.accordion-description { -transition: opacity .7s ease-in-out; -moz-transition: opacity .7s ease-in-out; -webkit-transition: opacity .7s ease-in-out; opacity: 0; visibility:hidden; font-style: italic; float: right; margin-top: 10px; margin-right: 10px; } removed mouseenter event of item element:
function accordionload() { $(".accordion-header").removeclass("expanded"); $(".accordion-content").hide(); $(".accordion-header").bind("click", function(){ $(this).toggleclass("expanded"); $(this).siblings(".accordion-content").slidetoggle(); }) $(".expand-all").bind("click",function(){ $(this).siblings(".accordion").find(".accordion-content").slidedown(); $(this).siblings(".accordion").find(".accordion-header").addclass("expanded"); }) $(".collapse-all").bind("click",function(){ $(this).siblings(".accordion").find(".accordion-content").slideup(); $(this).siblings(".accordion").find(".accordion-header").removeclass("expanded"); }) }
Comments
Post a Comment