Hi Kenirwin, I was just checking out your code below. I am new to jQuery and I just put the accordion on one of my pages. I only have one page on this particular site, and I wanted to place as much information "above the fold" as possible. Therefore, I selected hiding and showing text links as well as the jQuery accordion.
I have four sections in the accordion. The last two contain quite bit of content. By default (jQuery code), the first accordion section is open/expanded. I would all the sections to be closed/collapsed at the beginning. Also, I like your code on the user being to to expand all and collapse all, but your code looks very complicated (I'm a noob). Could you tell me where I can find the code to (at least) collapse all at the beginning? Or explain your code to me in simpler terms? Then the user can just select what they want to view one at a time and close the accordion back up to keep the page with the "appearance" of looking shorter. I can send you the code if you want. It's basically just the code here: http://jqueryui.com/demos/accordion/. I anticipate your reply! Sincerely, noah On May 3, 7:33 pm, kenirwin <kir...@wittenberg.edu> wrote: > I've been tinkering with Andrew-243's script to add an "expand all" option to > the jQ-UI accordion functionality, and I'd like to offer a couple minor > improvements to that script. You can see my version of the script in action > at:http://alltrees.org/ken/permanent/expand-accordion.php > > 1. In the last section of the JS code, use $('#container #expand').text() > instead of $('#container #expand').html() so that the script will work right > the first time. (When I was using the unmodified version of the script, it > was picking up some extra html code from the jQ-UI accordion function, and > so collapsing instead of expanding on the first click.) > > 2. I've changed one of the comments to more accurately reflect the action of > the script. Here's the complete JavaScript code again, with my changes in > bold: > > :::::::CODE:::::: > // this var will be used to tell the system whether or not > // other sections will respond to clicking on a headline > var closeOthers = true; > > // check which sections are open > function checkOpen() { > // how many sections are open > var openCount = $('#container .section:visible').length; > // how many sections are there > var totalCount = $('#container .section').length; > // set closeOthers var based on if there are 1 or 0 sections open > if (openCount < 2) closeOthers = true; > // change the text in the expand link based on if > // there are more or less than half of the sections open > if (openCount > totalCount/2) { > $('#container #expand').html("Collapse All"); > } > else { > $('#container #expand').html("Expand All"); > }} > > // hide all sections > $('#container .section').hide(); > // show the first section > $('#container .section:first').show(); > // actions taken upon clicking any headline > $('#container .headline').click( function() { > // set checkSection to the section next to the headline clicked > var checkSection = $(this).next(); > // if the section is open, close it, and call checkOpen > if(checkSection.is(':visible')) { > checkSection.slideUp('normal', checkOpen); > return false; > } > // if the section is closed and closeOthers > // is true, close all other open sections > else { > if (closeOthers) { > $('#container .section:visible').slideUp('normal'); > } > // open the section and call checkOpen > checkSection.slideDown('normal', checkOpen); > return false; > }}); > > // actions taken upon clicking the expand link > $('#container #expand').click( function() { > // if the expand link's text is 'expand all', set closeOthers > // to false, open all sections and call checkOpen > if ($('#container #expand').html() == "Expand All") { > closeOthers = false; > $('#container .section').slideDown('normal', checkOpen); > } > // if the expand link's text is 'collapse all', set closeOthers > // to true, hide all sections, and call checkOpen > else { > closeOthers = true; > // the 1 prevents nasty flickering in some browsers > $('#container .section').hide(1, checkOpen); > } > return false;}); > > -- > View this message in > context:http://old.nabble.com/Accordion---expand-all--tp21596331s27240p284415... > Sent from the jQuery UI Discussion mailing list archive at Nabble.com. > > -- > You received this message because you are subscribed to the Google Groups > "jQuery UI" group. > To post to this group, send email to jquery...@googlegroups.com. > To unsubscribe from this group, send email to > jquery-ui+unsubscr...@googlegroups.com. > For more options, visit this group > athttp://groups.google.com/group/jquery-ui?hl=en. -- You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to jquery...@googlegroups.com. To unsubscribe from this group, send email to jquery-ui+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.
