How to create something like jQuery Accordion? - javascript

We need to create a FAQ page that has a requirement that clicking the title will open up the answer.
jQuery Accordion popped immediately to mind, and I have spent the last couple of days trying to get that to work with our code.
In short, it can't (at least, not easily) because migrating our version of jquery up from 1.7.1 causes a number of our other controls to break.
All of our controls load from a Template, like the one below:
<?php include(SITE_ROOT.'lib/templates/masterPage.php'); ?>
I could modify masterPage.php to use the latest jquery, but then we would need to stop all of our software department to spend the next few months regression testing. The company is not ready for that.
I have gotten Accordion to work with 1.8.3 and up (see fiddle, but we are locked into 1.7.1 for now.
Is there something else out there that I can use to create this effect besides the latest jQuery?
Is there anything in HTML5? I can use that.

You can create an accordion with HTML 5 and CSS3 see http://www.expression-web-tutorial.com/accordion-menu-tutorial.html

This is a really nice accordion with just plain CSS3, though if you support IE lower than 9, it won't be useful, as it use pseudo classes.
http://tympanus.net/codrops/2012/02/21/accordion-with-css3/
There's also this other one that I remember adapting to my needs on a project I made about a year ago.
http://thecodeplayer.com/walkthrough/vertical-accordion-menu-using-jquery-css3
Again, CSS3, IE will cause issues.

You could try another accordion plugin, there 2 that are bundled with the two best frontend frameworks available
I believe foundation 4 may be compatible with your version of jQuery
http://foundation.zurb.com/develop/download-f4.html
http://foundation.zurb.com/docs/components/accordion.html
or
Bootstrap should work too.
http://blog.getbootstrap.com/2013/05/17/bootstrap-2-3-2-released/
http://getbootstrap.com/2.3.2/javascript.html#collapse
^^^ This is an older version of bootstrap, the newest version might be compatible too. might be worth checking if you go down this route as you would want to be on the latest stable release really.
I prefer foundation by miles though
UPDATE
Foundation don't seem to mention that any specific version of jQuery is required and there seems to be people using zurb foundation 5 with jquery 1.1..... and you can just choose the accordion using the customise tab http://foundation.zurb.com/develop/download.html#customizeFoundation

Related

Going from Bootstrap 2 => Bootstrap 3 ... Without Destroying Site Styles

I inherited a codebase that was using a 2.x version of Bootstrap. Recently I tried upgrading to Bootstrap 3 to fix a bug. It fixed the bug, but now my site is a disaster. Heading tags are bigger but not bold. My drop-downs don't look drop-downs, and my buttons don't look like buttons. And so on.
It seems to me that I have two options:
revert to Bootstrap 2, save my site, and find another way to fix my original problem (but then I'm stuck with 2 forever)
bite the bullet, spend hours comparing old site vs. new site and copying over all the styles from the old bootstrap in to a new bootstrap-fixes.css.
But, given that Bootstrap 3 has been out for awhile, I'm thinking maybe this is a solved problem (with a better solution than either of the above). One idea I had was to use the bootstrap customizer, which let's you override the base bootstrap styles. The only thing is, coming up with all of the customization options to customize Bootstrap 3 properly (ie. to look like Bootstrap 2) is about as much work as creating a bootstrap-fixes.css.
However, the customizer also takes a config.json file, which made me wonder:
Is there any publicly avaiable config.json for generating Bootstrap 3 styles that preserve the relevant Bootstrap 2 styles?
If not, is there any other way to get Bootstrap 3 JS, and some sort of matching CSS file (customized Bootstrap 3 CSS? upgraded Bootstrap 2 CSS? some sort of frankenstein's monster?) that will work with the JS, but not destory my site?
Thanks in advance for any help.
Bootstrap 2 is desktop first (graceful degradation). Bootstrap 3 was written from the ground up as mobile first (progressive enhancement). They are two completely different beasts. You need to re-design your site afresh mobile first with Bootstrap 3.
Here's an official list of what's changed:
Migrating to v3.x
You could try using some kind of automated tool but personally I just wouldn't trust these to get it right.

Get easy commenter and Bootstrap to work with same version of jQuery?

I am using bootstrap 3 and jQuery version 1.10.2
I am also using easy commenter and they require jQuery version 1.5.2 I have tried to just keep version 1.10.2 , just keep version 1.5.2 and keep both of them. But in every case one of them does not behave as expected. With version 1.5.2 the collapsible menu in header stops working with version 1.10.2 easy commenter stops working. How should I deal with this problem?
Here is a link to the page I am working on http://8mags.com/lessons/php/phpcalendar.php
Use the newer JQuery plus the migrate plugin
The correct answer is: If the "easy commenter" plugin doesn't work with a current version of jQuery, rather than one from three years ago, you want to find a different plugin or take the existing one and modify it so that it works with the current jQuery. The differences between 1.5.2 and 1.11.2 (the current version as of this writing) aren't really all that big, and are easily updated.
If you don't want to do that (why not?), then you can use both versions of jQuery on your page, but it doubles the size of an already-large library, increasing page load time.
Here's how:
<script src="jquery-1.5.2.js"></script>
<script src="easy-commenter.js"></script>
<script>
var $old = jQuery.noConflict(true);
</script>
<script src="jquery-1.11.2.js"></script>
<!-- all your other plugins and such, including bootstrap -->
You load jQuery 1.5.2, load the easy commenter plugin, then use noConflict to release both the $ and jQuery symbols, and load jQuery 1.11.2.
When you want to use the easy commenter plugin, use $old rather than $.

Jquery: Swap out HTML partials depending on screen resolution

With the current project I am working on (Using Bootstrap 3), the client has asked for major changes to the structure for mobile views.
I have used Zurb Foundations Interchange in the past: http://foundation.zurb.com/docs/components/interchange.html - Which is just awesome!
I am wondering if anyone has used a bootstrap alternative? Or if you have coded this before, what has been your approach? I'm a little lost in which direction to go on this one. Searching seems to yield little results. I will probably just do this programmatically, but like the idea of JS handling it.
Many thanks
I had to do this for a client and I used the built in Bootstrap visible-xs, invisible-s etc. to end up with several different versions of the page depending on the screen size. It was a bit fiddly but it didn't need any JavaScript and is easy to modify. It's an option at least and as you're already using Bootstrap everything you need is there.

How can you use jQuery mobile's Column-Toggle without applying the mobile style to your whole page?

I'm trying to use the jQuery Mobile Column-Toggle widget in a web application that will be almost exclusively used by non-mobile users, so I really just want the Column picker functionality, without any of the other jQuery Mobile features. However, if I load the jQuery Mobile js and css, my entire site picks up the mobile style, which conflicts horribly with my existing stlying.
I've tried several mobileinit options that supposedly should suppress the mobile styling (I've tried various combinations of these settings - I'm just combining them all here for brevity):
$(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false;
$.mobile.ignoreContentEnabled = true;
$.mobile.page.prototype.options.keepNative = "select, input, a";
});
The other option I've seen is to add data-role="none" to all of the elements you don't want to style, but that has two problems:
It doesn't work for me (I'm still investigating why, and will update my question soon).
It seems like bad practice to junk up your html with a ton of suppression tags, which also increase the page size.
I've tried using the download builder to create a customer jQuery Mobile package with only the Column-Toggle (and dependency) module, but that custom package doesn't seem to work at all.
So I have two questions really:
Is there an alternative column picker for HTML tables that I can use instead of the jQuery Mobile version. I feel like I have done extensive web research, but have found nothing else.
What methods exist to prevent jQuery Mobile from applying it's style to your whole page? There are a few other SO questions about this, and I'm afraid that there just isn't any currently working method to do so.
Update: I've actually changed to using the new column selection widget in the tablesorter plugin, and scrapped jQuery Mobile.

Display tabs like FireFox's on my website

I want to implement with jQuery a tabbed interface for my website (like the firefox ones). They should also be able to be moved like the ones FireFox has.
If anyone knows of an already written library, please give me a link.
If you're already using jQuery, the jQuery UI Tabs has a sortable option for this.
Checkout the other demos for all the widgets there as well...in most cases it's not worth it to include the jQuery UI library for any 1 widget or effect...but if you can make use of a few of them, it's a nice library to work with. Of course there are alternatives out there, just throwing this as the simple/configurable option.
As a side note, it is jQuery UI....style it like you want.
ExtJS is more suitable for such interfaces. In the process of trying it out you will find many more amazing possibilities that it opens up. Also, it is very well written and a pleasure to work with.

Categories