danielstocks / jquery-collapse Goto Github PK

Just joking ;)

Nice plugin, but I cannot understand why it's another accordion-like plug instead free markup one.

        <div class="current-state-class" id="i-want-real-custom-markup" data-collapse="persist">

        <h2>Static element! I don't be toggled. Do not touch me. </h2>

        <button class="toggler">Toggler</button>

        <div class="hide-me">

            I am content which will be hided by class CSS, from parent element.

                .hidden > .hide-me { display: none}
        </div>

    </div>

I want markup like this, but set for many elements (group), not for every single example.

So, primary, I like your plugin because of cookies/storage support. But I want something more usable that 1 - 2 auto-element segments.

By target, I mean solution like you can check here.
http://www.getuikit.com/docs/toggle.html

Or Bootstrap Collapse also work this way. But without cookies.

On the demo page it makes up to 10+ requests for cookies, Would be really awesome if someone improved this to store values in JSON format to 1 cookie to cut down on all the HTTP traffic

I am looking at test/ folder, test.js file.

And see there:

var el = $("#main .test").collapse({disableCookie : true});

But exploring jquery.collapse.js gives no occurence of 'disableCookie' property at all.

Thanks.

Okay so not really an issue, just a public service announcement from The Curator, David Higgins (@Higgo)

-- This repo has been included in The Github Pirates' Chest.

What is this about?
The Github Pirates is a constantly updated resource for those interested in HTML5, CSS3, and JavaScript.

You should find out more about this project below:

http://codepirat.es/

OR, Download The Chest:

http://isharefil.es/E9Co

Tried this in IE8 and it's not working. Also, how can I collapse/expand all?
Thanks a LOT for the script, I wonderful!

I think graceful degradation is in order ;)

In order to take advantage of the slideup/slidedown feature when opening and closing, I added the code below the linked in JS files[as instructed to do so in the sample code]:

<script>
new jQueryCollapse($(".toggle"), {
              open: function() {
                this.slideDown(150);
              },
              close: function() {
                this.slideUp(150);
              }
            });     
</script>

By adding the above code, it generates 2 hyperlinks in the HTML.

    <a href="#">
        <a href="#">Name</a>
    </a>

Has anyone experienced this and has anyone found a fix?

As far as I can tell it's not currently possible to use a collapsible div within a collapsible div. Would be a welcome addition.
Thank you for all your work so far, much obliged!

Hey you guys, I found a bug and was wondering, if you can reproduce it.

So, I'm using jQuery 1.8.2 and the current version of jQuery-Collapse. Everything works fine so far, the plugin is suggestible and the code is pretty slim. Unfortunately, there's a bug in IE8 when it comes to show and hide the 'details' of a summarized content.

I debugged the whole way down up to line 113. This line does nothing more then showing or hiding content whether '_this.isOpen' is true or not. And just like I said, this works great in all browsers, except the IE8.

So, it seems like the show() and hide() methods aren't working in IE8, so I wrote a little jsbin-fiddle to test it out. I thought, maybe the jQuery version I use is too new for IE8. Wrong. The fiddle works in IE8. This means, hiding and showing elements just doesn't work in this plugin when using IE8.

Since show() and hide() aren't any dark magic (it's more or less just a css 'display: none' or 'display:block'), I replaced the expressions in line 113 with jQuery's css() method to figure out this works.

_this.isOpen ? _this.$details.css('display', 'block') : _this.$details.css('display', 'none');

Et voila! This works in IE8. So my question:

Can anybody of you reproduce this issue?

Hi! First off great Plugin! i will donate to it as far as my problems are solved!
Is there any way to open a collapsible menu by its id?

for example i have i menu with id : entry_2
how can i open the entry 2 collapsible menu via jquery?

Thanks in advanced!

Allow customisation of the 'open' and 'close' class names, or namespace them perhaps, eg. 'jquery-collapse-open'.

They're very generic class names so it's likely that they will clash with other CSS styles.

sorry, this should be removed

I was using a previous version of this plugin, and it looks like a few things have changed. One thing seems fairly weird to me:

• Adding the "collapsed" class to open elements by default
  • This seems fine if the plugin were looking for 'collapsed' classes and reversing them on initialization - making them open. However, it doesn't document well, essentially saying "to show this by default, add the 'don't show this' class". I was initially confused by this. And then:
• It appears that the "collapsed" class is actually being applied to every "open" element group, and removed when it is actually collapsed.

Isn't this the opposite of how it should read? Am I completely missing something here?

In a requirejs project, I was getting there error jQueryCollapse not defined on line

new jQueryCollapse($(this), settings);

this is fixed by declaring the variable first:

  // Expose constructor to
  // global namespace
  jQueryCollapse = Collapse;

  // Expose in jQuery API
  $.fn.extend({
    collapse: function(options, scan) {
      var nodes = (scan) ? $("body").find("[data-collapse]") : $(this);
      return nodes.each(function() {
        var settings = (scan) ? {} : options,
          values = $(this).attr("data-collapse") || "";
        $.each(values.split(" "), function(i,v) {
          if(v) settings[v] = true;
        });
        new jQueryCollapse($(this), settings);
      });
    }
  });

Conflicts with http://twitter.github.com/bootstrap/ in responsive mode. I presume the conflict is with the name collapse or some css reference.

Only way I managed to get bootstrap to work in responsive mode was by excluding the js reference <script src="/assets/js/jquery.collapse.js"></script>

Any ideas on how we can have both working?

Hello

First of all, thanks a lot to share this great plugin with all of us!!! It´s really usefull! :)

But i´m having a little issue with your plugin in IE7/IE8 because i´m trying to apply some css3 styles on tabs using the css3 PIE. Have you got any idea how to "merge" this two plugins without have troubles?

I know that this is not an issue on your plugin, my thing is if you have idea how to have these two great plugins working together ! :)

Many thanks in advance

After playing with 'collapse()' got the right rule: "h3s will become headers, following block element will be collapsed".

Was not obvious from README ;)

Thanks!

I want my content opened default if user came with his desktop/tablet.
I want my content to collapsed default, if user came with his smartphone.

I use "hidden-phone" and "visible-phone" classes of Twiter Bootstrap to serve different behavioured pages to my visitors.

How can I integrate this with jQuery-Collapse plugin?
I don't prefer to fire it from JS, I need to do it from CSS.
Thank you very much.

The state classes, “open” and “close” conflict with either predefined classes or with CSS frameworks like twitter bootstrap which already have those classes defined and cannot easily be edited. A better practice would be to prepend the open and close classes with an application specific keyword such as jcollapse-open and jcollapse-closed

Google Chrome 12 has native support for the details element.

When using code such as
$("details").collapse({head: "summary", group: "p"})
found on the bottom of
http://webcloud.se/code/jQuery-Collapse/
the native functionality and the script seems to clash.

The effect is that it's impossible to expand the details.

Under the heading "The jQuery magic" on http://mathiasbynens.be/notes/html5-details-jquery, there is code to check for native support for details.

Not sure where to put this, but I found a bug and a fix for it.

On line 42 of the jquery.collapse.js, Chrome throws an error:
uncaught typeerror: object [object Object] has no method 'on'

Replacing the method 'on' with 'bind' fixes the issue.
Found the solution here: http://stackoverflow.com/questions/10912346/uncaught-typeerror-object-object-object-has-no-method-on

I want to use this plugin, but currently my markup is just an arbitrary link on the page with an href pointing to an ID on the page (href="#toggle-content"). The link and content to be toggled aren't contained in the same div.

Is there a good way to achieve this with this plugin?

I did not find more suitable public place to thank you for this plugin, so writing here.
A few days ago I noticed you that links inside collapsible divs dont work and today I see it fixed. Many thanks for your work and good support!

This is an error I get at webcloud.se:

Uncaught Error: SECURITY_ERR: DOM Exception 18 jquery.collapse_storage.js:18
Storage jquery.collapse_storage.js:18
Collapse jquery.collapse.js:25
(anonymous function) jquery.collapse.js:134
p.extend.each jquery.min.js:2
p.fn.p.each jquery.min.js:2
$.fn.extend.collapse jquery.collapse.js:128
(anonymous function) webcloud.se:224

As a result some examples are not working (Default, Accordion, Persistence and couple of others).

Hello,
what about getting rid of images used as triangles and use characters from 'Geometric shapes' unicode block?

Left pointing triangle:
▶ ('\342\226\266')
http://www.fileformat.info/info/unicode/char/25ba/index.htm

Down pointing triangle:
▼ ('\342\226\274')
http://www.fileformat.info/info/unicode/char/25bc/index.htm

Most of basic fonts contain these characters (see http://www.fileformat.info/info/unicode/char/25ba/fontsupport.htm). I guess font-family should be forced to list of known fonts, just for case that page uses some obscure font. But this will remove need for downloading extra image and allows to resize triangle automaticaly.

How can I trigger the accordion to be open on page load if there was a class that exist within it?

It seems the script doesn't work when loaded through .load(), probably due to the lack of event delegation. I tried changing

obj.bind("click", function(e) {

to

obj.live("click", function(e) {

and

obj.delegate("a", "click", function(e) {

but that just seems to break the script. Is it possible? Thank you in advance!

Is it possible to have content inside a hidden section that loads in when you open it?

I'm not very familiar with what you can and can't do with CSS

also can this be used on tables? I've tried with no luck.

and my last issue is i was wanting to use a jQuery.ScrollTo on a link, so the user could lick something and the page would scroll down and then open the cosponsoring section

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

can these scripts work together?

I'm sorry if this is already covered or simple things to implement, I'm very new to this.

Thanks

Is your plugin Themeroller compliant?

Thanks!

I'm having some issues with content flashing (user sees unititialized state for a split second) when I initialize this plugin.

Is there way (e.g. an exposed callback) to know when the plugin initialization has happened and only show the content after that?

Hello

I´m having a little problem. I have a html page with the Jquery & Collapse script calls made. In this page i have some tabs with Ajaxed content. The problem is, some of this content have some Collapsible toggles which aren´t working.

Do i have to call the plugin on the Ajax page?

Many thanks in advance and sorry about my english!! :)

Hi!

I wonder whether option like "accordion: true" could added to hide all windows and show only one that was clicked.

I know I can achieve it though show() and hide() hooks but I think it is rather useful option for plugin in general.

I want to use jquery-collapse (acting as accordeon) instead of jquery.ui.accordion because of 1) nice cookies feature. 2) it's tiny size.

Thanks!

Thank you for this great plug-in, have used it several times. Now have a need to add an Expand All/Collapse all link and am failing I think because the cookies are not initially created until one of the triggers is clicked. Any thoughts to get me pointed in the right direction?

I had implemented this plug-in for press release.

I wanted this plug in to act based on url.

i.e If I give demo.com/press/press-release-item-4 OR demo.com/press#press-release-item

That particular accordion should expand automatically based on url.

Hi Daniel,

I am facing an issue when use following code.

var demo = new jQueryCollapse($("#demo"));
demo.open(1);

When click on the array one to close the same accordion. its getting close, but within a sec it expands again.

visit:http://www.cloudbyte.com/careers.aspx#senior-storage-protocol-qa-engineer

Is this kind of DOM possible? I can't seem to get it working

<div id="demo" data-collapse>
  <div>
    <h2>clicks here will trigger collapse</h2>
    <small>... here too</small>
  </div>
  <section>
    <p>You can use any container you like (in this case a div element)</p>
  </section>
</div>

Also, thanks for a great plugin!

How can open or close an item through jquery? I meant to say trigger close or event event from using jquery (not vanilla)

my mistake! no problem ;)

First off, excellent plugin.

It would be very nice to be able to remove all collapse click handlers and expand all of the collapsed items programmatically, perhaps like $("myelement").collapse("destroy");

My use case is for a responsive site. On small screens I collapse all of the sections, similar to mobile Wikipedia. On larger screens all of the sections are open, similar to desktop Wikipedia. On large screens I don't want the user to be able collapse sections so I need to unbind all of those click handlers.

Really the destroy method would undo everything that the plugin has done earlier, e.g., remove ARIA attributes, remove elements that were created, unbind events, etc.

Hey I would love to use this script on upcoming project but after some quick testing it fails in IE7, IE8 and IE9.

Hi All

How can i have this situation working? I mean fire the plugin on a span!!!

Many thanks in advance,
Legues

```<script>
$(document).ready(function() {
    new jQueryCollapse($("#custom-show-hide-example"), {

      open: function() {
        this.slideDown(150);
      },
      close: function() {
        this.slideUp(150);
      },
      query: ".teste span.open",
      accordion: true
    });
    });
  </script>```

<div id="custom-show-hide-example"> <div class="test"><a href="http://www.someurl.com">Hello</a> <span class="open">Test</span></div> <div> <p>Hello Sir.</p> <p>I'm sliding</p> </div> <div class="test"><a href="http://www.someurl.com">Hello</a> <span class="open">Test</span></div> <div>I like tea</div> <div class="test"><a href="http://www.someurl.com">Hello</a> <span class="open">Test</span></div> <div>This is some information</div> </div>

The close class conflicts with bootstrap.

I am trying and failing at adding a link to expand/collapse the div above. Anyone have any hints?

I'd like some of my collapsibles to default to open. You should add an option tospecify whether the collapsible starts open or closed by default.

I assume this is probably intended as open source if it's on GitHub, but it would be nice to have a license explicitly declared. Some clients/employers have policies about what open source licenses they will and won't accept in code that's used in work for them.

Hi, does anyone know how I can make one
of the top menus a link. So when clicked
it links to another page also containing the menu,
and when this page is loaded, the clicked
menu is expanded showing the sub items.

Any help would be appreciated :-)

Great plugin, but would be nice if you prevented animation buildup. Chris Coyier has a good overview of techniques here http://css-tricks.com/examples/jQueryStop/

I get a lot of questions/emails on how one could easily have a button that would open/close all sections.

Would be helpful to either include an example in the docs and/or on the project website.

In order to improve accessibility it would be great if you could also make use of the aria-expanded attribute.

Example of proper implementation here: http://www.oaa-accessibility.org/examplep/accordian1/

Further info here: http://www.w3.org/WAI/GL/wiki/Using_the_WAI-ARIA_aria-expanded_state_to_mark_expandable_and_collapsible_regions

After expanding/collapsing, Firefox shows a dotted border around the link. Theoretically this can be fixed with CSS, but it's not a good idea, because it hurts accessibility. I guess a more sane solution would be to just unfocus the link with JavaScript after the expanding/collapsing is done.