Search the Community
Showing results for tags 'accordion'.
Found 4 results
-
Hi, I'm currently stuck as two how I can do this, I have a desktop and mobile design where on Desktop the design acts like tabs but on mobile it acts as an Accordion. But i'm not too sure how the best way to go about this is. Please see attached the designs. Any examples or advice on how to do this would be greatly appreciated.
-
How do you solve an error where a soft refresh of data causes an accordion to fail, but on a hard refresh it works just fine? example: $(function() { $( "#accordion" ).accordion({ collapsible: true, active: false, heightStyle: "content" }); console.log('ran'); }); -
Any help on this would been very much appreciated. I am trying find a way to save the state of the JQuery accordions on my webpage after a user refreshes or changes webpages within my website. I have tried installing different scripts and downloading different cookie plugins but they either don't work or breaks all of the jquery functions on my webpage. Thank you. This is in my header <head> <link rel="stylesheet" type="text/css" href="css/styles.css"> <link rel="stylesheet" type="text/css" href="css/jquery-ui.css"> <script src="js/jquery.js"></script> <script src="js/jquery-ui.js"></script> <script type="text/javascript" src="Cookies/jquery.cookie.js"></script> </head> My Html <div id="History"> <!---Images---> <p>Today In History</p> <div> <script type="text/javascript" src="http://rss.brainyhistory.com/link/historyevents.js"></script><small><i>more <a href="http://www.brainyhistory.com/" target="_blank">History</a></i></small> </div> </div> This is my original JQuery code $( "#History" ).accordion({ collapsible: "true", heightStyle: "content" });
-
Hi. I have just downloaded a WordPress theme which has a pre-installed horizontal accordion on the homepage. The .css is: .haccordion{ padding: 0; } .haccordion ul{ margin: 0; padding: 0; list-style: none; overflow: hidden; /*leave as is*/ } .haccordion li{ margin: 0; padding: 0; display: block; /*leave as is*/ width: 100%; /*For users with JS disabled: Width of each content*/ height: 200px; /*For users with JS disabled: Height of each content*/ overflow: hidden; /*leave as is*/ float: left; /*leave as is*/ } .haccordion li .hpanel{ width: 100%; /*For users with JS disabled: Width of each content*/ height: 200px; /*For users with JS disabled: Height of each content*/ } <script type="text/javascript"> haccordion.setup({ accordionid: 'hc1', //main accordion div id paneldimensions: {peekw:'50px', fullw:'786px', h:'786px'}, selectedli: [0, true], //[selectedli_index, persiststate_bool] collapsecurrent: false //<- No comma following very last setting! }) haccordion.setup({ accordionid: 'hc2', //main accordion div id paneldimensions: {peekw:'30px', fullw:'786px', h:'786px'}, selectedli: [-1, true], //[selectedli_index, persiststate_bool] collapsecurrent: false //<- No comma following very last setting! }) </script> ...which all seems pretty straightforward... The .js is: <script type="text/javascript"> haccordion.setup({ accordionid: 'hc1', //main accordion div id paneldimensions: {peekw:'50px', fullw:'786px', h:'430px'}, selectedli: [0, true], //[selectedli_index, persiststate_bool] collapsecurrent: false //collapse current expanded li when mouseout into general space? }) </script> ...again, fairly straightforward... The problem is that, when I go to the homepage, the first panel of the accordion is open with the other accordion 'tabs' visible on the right - all good so far - but the second I roll over, the accordion collapses and won't re-open...the hyperlinks still work off the 'tabs', but each layer / panel of the accordion refuses to open, roleed over, clicked on, whatever... Any suggestions?
