Skip to content

Collapsible Not Working #21

Description

@ryanjohnsond

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions