Search the Community
Showing results for tags 'accordian'.
Found 4 results
-
If the bootstrap Accordion and Nav-Tabs is shaking then use the following java script code. 1. java script code: 2.Method of use I hope the problem will be solved
-
Hey everyone, I was wondering if I could get another set of eyes on this to help me solve this puzzle. Making this fluid for various sized windows. Please just look at first blue accordion item. On rollover, the targeted accordion item expands to 50% width. Everything else collapses to 16.66%. On click, the first slide expands to 100% width. My issue is with the contents of the slide container. The slide container needs to be made up of 50% image and 50% white text box. In this codePen, you will see I sort of finagled something together where as the container expands to 100% the image quickly changes to 50%. Its a little janky and you can see the tween sort of jerk. Not really ideal: Here I start out with the blue image and the white text box both being set to 50%. But as you can see, rather than being 50% of the entire experience, they are 50% of the containers current 25% state. When you click to expand it goes to where it needs to be. Here is a quick, thrown together wireframe of what i'm trying to accomplish. I figured percentages were the way to go because I needed a fluid experience. Maybe i should explore a different path? Any ideas or guidance would be great.
-
Hi Folks, my first post to this forum. I've been using GSAP for Flash for years, but now trying to get a handle on working in JavaScript. GSAP for JS is a big help. I am working on a custom accordion menu and it mostly works, but has a bug where altering the "selected" look of a clicked button stops working after multiple clicks. i have created a CodePen project here: http://codepen.io/PawleyBoboli/pen/gjAxC Notes: I put this together from pieces of another example I found on the forum, but can't find again (sorry, too tired) I am using TimeLineLite to tween the addition of a class for the selected "active" item , and removal of the class for all others. It's working for the Module buttons, but for the Chapters inside a module, it stops highlighting your selection after clicking between 2 items repeatedly. Example:Open "SECTION MODULE 2" Click the 1st item - it highlights click the 2nd item - it highlights and the 1st one returns to previous state now click back & forth between them - all highlights stop working. I think my problem is related to the adding and removing of the ".activeChap" class but I am not sure. I have commented my code. Any help is greatly appreciated. --Kevin
-
I've been looking for a better way to code and animate Accordian's to unleash some creativity. I've been playing around with GSAP a lot lately trying to do some of the cool animation effects I have liked in flash using GS), and making them browser compatible. I thought of a cool way to do accordians that you have total visual control over. All of the other JavaScript one's or the SPRY assets that I have used in the past, have been very confusing and not very graphically customizable -as well as not very browser friendly. This is my start of one that I feel can go just about anywhere, in any direction (including diagonal) thanks to Mr. Green. I used super simple CSS. I added in an alpha change because the objects inside of the div would stay visible and cover stuff, but there is probably a much better way to do it. Here is the start of the simple code I came up with so far, let me know what you think: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> .containers { /* [disabled]margin: 10px; */ /* [disabled]float: left; */ height: 507px; width: 421px; position: absolute; background-color: #0F0; display: inline-table; white-space: normal; } .boxes { background-color: #FFF; float: left; height: 50px; width: 400px; position: relative; margin-right: auto; margin-left: 10px; } </style> </head> <body> <div class="containers"> <div class="boxes" id="a"> <div align="center">a</div> </div> <div class="boxes" id="a1"> <div align="center">a-1</div> </div> <div class="boxes" id="b"> <div align="center">b</div> </div> <div class="boxes" id="b1"> <div align="center">b-1</div> </div> <div class="boxes" id="c"> <div align="center">c</div> </div> <div class="boxes" id="c1"> <div align="center">c-1</div> </div> </div> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="js/greensock/minified/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="js/greensock/minified/easing/EasePack.min.js"></script> <script type="text/javascript" src="js/greensock/minified/TweenLite.min.js"></script> <script type="text/javascript" src="js/greensock/minified/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="js/greensock/minified/plugins/CSSRulePlugin.min.js"></script> <!--start events--> <script> $(document).ready(function () { TweenLite.to(a1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); TweenLite.to(b1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); TweenLite.to(c1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); }); $("#a").click(function() { TweenLite.to(a1, 1, {css:{height:50, alpha:1}, ease:Cubic.easeOut}); TweenLite.to(b1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); TweenLite.to(c1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); }); $("#b").click(function() { TweenLite.to(a1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); TweenLite.to(b1, 1, {css:{height:50, alpha:1}, ease:Cubic.easeOut}); TweenLite.to(c1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); }); $("#c").click(function() { TweenLite.to(a1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); TweenLite.to(b1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); TweenLite.to(c1, 1, {css:{height:50, alpha:1}, ease:Cubic.easeOut}); }); </script> </body> </html>
