juven14 / collapsible Goto Github PK

View Code? Open in Web Editor NEW

70.0 70.0 64.0 306 KB

No longer maintaining - Manage multiple collapsibles with cookie support

License: Other

JavaScript 100.00%

collapsible's People

Contributors

Stargazers

Watchers

Forkers

felixschwarz rustywomack jebaird jgimenezdcl aromtic electricbrick nydevel coldfuzion mwtiso enkhmarco redstencil eniuz akinnard icr undispated ahoymehearties hamdankhalid fendri zainab-oraby winxky uramabuta abdoukarim uai-sonda mikesuptown rfmcneil rlisperguier monu180 plusjoost khshin collinsmtita taherscherzay sjakisa web5design stoopler markitosgv siemandelc mfrancois vijaydialani clivewalkden anshulacro akkum chadkeating ooredroxoo greinard ndumisom ryanjohnsond nguyencuvi scoyne xwiz darkvaderfr begench utkarsh94 cfinster aghofari21 invulner goupviet depasq rochesterj iplaydu jmooreweb nicksultanum ttaique austinsmom carry0987h renatjf

collapsible's Issues

Doesn't work on iE8

Hello,
I need the pluggin to work on ie8 but seems to have a problem with the "addEventListener" cause i've got an alert and the script doesn't work. All is open and even if i click, nothing happen.
Thank you by advance for your answer/help.

Collapsible Not Working

I followed the README file,but the "Collapse All" and "Close All" links are not part of the code in your README file. How can I add those?
I searched for "jQuery release v1.10.1," but didn't find that on the jQuery site. Seems 1.11.1.min.js is working in its place.

<!doctype html>
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Collapse Test</title>
<!-- css -->
<style type="text/css">
@CHARSET "UTF-8";
#navigation {
width:250px;
}
#content {
    width:700px;
}

#navigation,
#content {
    float:left;
    margin:10px;
}

.collapsible,
.page_collapsible {
    margin: 0;
    padding:10px;
    height:20px;

    border-top:#f0f0f0 1px solid;
    background: #cccccc;

    font-family: Arial, Helvetica, sans-serif;
    text-decoration:none;
    text-transform:uppercase;
    color: #000;
    font-size:1em;
}

.collapse-open {
    background:#000;
    color: #fff;
}

.collapse-open span {
    display:block;
    float:right;
    padding:10px;
}

.collapse-open span {
    background:url(images/minus.png) center center no-repeat;
}

.collapse-close span {
    display:block;
    float:right;
    background:url(images/plus.png) center center no-repeat;
    padding:10px;
}

div.container {
    padding:0;
    margin:0;
}

div.content {
    background:#f0f0f0;
    margin: 0;
    padding:10px;
    font-size:.9em;
    line-height:1.5em;
    font-family:"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

div.content ul, div.content p {
    margin:0;
    padding:3px;
}

div.content ul li {
    list-style-position:inside;
    line-height:25px;
}
div.content ul li a {
    color:#555555;
}
code {
    overflow:auto;
}
</style>
<script type="text/javascript" src="javascript/jquery-1.11.1.js"></script>
<script type="text/javascript" src="javascript/jquery.cookie.js"></script>
<script type="text/javascript" src="javascript/jquery.collapsible.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    //collapsible management
    $('.collapsible').collapsible({
      defaultOpen: 'nav-section1,nav-section3'
    });
  });
</script>
</head>
<body id="top">

<div class="collapsible" id="nav-section1">Navigation Section<span></span></div>
<div>
    <ul>
    <li><a href="#">Navigation Item</a></li>
    <li><a href="#">Navigation Item</a></li>
    <li><a href="#">Navigation Item</a></li>
    <li><a href="#">Navigation Item</a></li>
    <li><a href="#">Navigation Item</a></li>
    <li><a href="#">Navigation Item</a></li>
  </ul>
</div>
<div class="collapsible" id="nav-section2">Navigation Section<span></span></div>
<div>
<ul>
    <li><a href="#">Navigation Item</a></li>
    <li><a href="#">Navigation Item</a></li>
    <li><a href="#">Navigation Item</a></li>
    <li><a href="#">Navigation Item</a></li>
    <li><a href="#">Navigation Item</a></li>
    <li><a href="#">Navigation Item</a></li>
  </ul>
</div>
<div class="collapsible" id="nav-section3">Navigation Section<span></span></div>
<div>
    <ul>
    <li><a href="#">Navigation Item</a></li>
    <li><a href="#">Navigation Item</a></li>
    <li><a href="#">Navigation Item</a></li>
    <li><a href="#">Navigation Item</a></li>
    <li><a href="#">Navigation Item</a></li>
    <li><a href="#">Navigation Item</a></li>
  </ul>
</div>
</body>
</html>

Multiple sets with Open Close for each

Can there be multiple sets that have their own Open/Close links? How would you code this so the Open All/Close All would only function for the set directly below and not for all sets?

Close button inside collapsible.

Hi.

I'm using your accordeon to expand news entrys.

Now because some expanded entries are very very long, I'd like to have a 'close' button at the inside the accordeon at the end of the content so one can easily close it without scrolling back up to close it.

Is this somehow possible?

multiable Collapsible bug

when using multiple collapsible a the cookies overtire each other

How to keep from collapsing when using buttons in heading?

http://i.imgur.com/L56XWCO.jpg

I have buttons in the header, but when I click them they open the content div. How do I prevent this behavior?

close and open functions

The close and open functions of the collapsible are the same as toggle function...

Ex:
$( this ).collapsible("close");

defaultOpen State

Hello,

Is it possible to load all collapsibles in open state without needing to define each ID in an array? Is it possible to use just a class for all collapsibles which shall be opened by default or to load by default all collapsibles open rather than closed?

Thanks,

Philip

Sample HTML error on demo page

On your page at: http://www.snyderplace.com/demos/collapsible.html

The Add HTML sample code uses blocks of code with 2 opening divs on the header line, the last div needs to be a closing div.

Collapsible not working in IE8/IE9

It appears that addClass and removeClass are not supported in IE. Is there a workaround available? Thanks in advance.

IE 7 Compatible?

We have client a client using IE 7 and we are having trouble with the collapsible. Is IE 7 not supported?

Collapsible Version: 2.1
jQuery Version: 1.9.2

Collapse all be default

I found this is the best collapsible plugin on the Internet which works perfectly with cookie...I have simple question here...I want to use this plugin with all defaultOpen because I don't seem to get it to work even I tried to specify all section from http://www.snyderplace.com/demos/collapsible.html but they all still not "open" by default...

Thank you for your great work!
Yori

Slideshow won't open inside a collapsible

I'm having a problem with a slideshow not showing up when putting it inside a collapsible. I googled a bit and there seems to be some onClick thing you can do maybe?

Link to page I'm having trouble with: http://rproject.uhostfull.com/test/
jsFiddle: http://jsfiddle.net/Dp4yZ/