Inline Accordion

[email protected]

by Ryan Brackett

HTML

<h4 class="accordion-label">Label One</h4>

<ul>
    <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</li>
    <li>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
    <li>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</li>
    <li class="link"><a href="#">More Info</a>

    </li>
</ul>

<h4 class="accordion-label">Label Two</h4>

<ol>
    <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</li>
    <li>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
    <li>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</li>
    <li class="link"><a href="#">More Info</a>

    </li>
</ol>

<h4 class="accordion-label">Label Three</h4>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.
    <br/>
    <br/><a href="#">More Info</a>

</p>

CSS

/* INLINE ACCORDION */
 .inline-accordion {
    font-family: sans-serif;
    line-height: 1.5em;
    border-radius: 3px;
    padding: 5%;
}
.inline-accordion .item {
    border-bottom: 1px solid #dedede;
}
.inline-accordion .item:last-child {
    border: 0;
}
.inline-accordion .item .accordion-label {
    margin-top: 0;
    padding: 20px 0;
    margin-bottom: 0;
    cursor: pointer;
    -webkit-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}
.inline-accordion .item.active {
}
.inline-accordion .item.active .accordion-label {
    color: #BE6200;
    padding-bottom: 10px;
}
.inline-accordion .item .item-info {
    max-height: 0;
    overflow-y: hidden;
    margin: 0;
    opacity: 0;
    -webkit-transition: opacity .3s ease-;
    transition: opacity .3s ease;
}
.inline-accordion .item.active .item-info {
    border-radius: 4px;
    margin-top: 0;
    max-height: 2000px;
    overflow-y: hidden;
    opacity: 1;
    padding: 0;
    padding-bottom: 30px;
}
.inline-accordion .item .accordion-control {
    color: #BE6200;
    font-weight: 400;
    margin-left: 30px;
    font-size: 13px;
    white-space: pre;
    text-decoration: underline;
}
.inline-accordion .item .accordion-control.open, .inline-accordion .item.active .accordion-control.close {
    display: inline-block;
}
.inline-accordion .item.active .accordion-control.open, .inline-accordion .item .accordion-control.close {
    display: none;
}
.inline-accordion .item .accordion-control.close {
    color: black;
}
.inline-accordion .link {
    list-style: none;
    padding-top: 10px;
}
@media only screen and (max-width: 300px) {
    .inline-accordion .item .accordion-control {
        float: none;
        margin-left: 0;
        margin-top: 10px;
    }
}

JavaScript

/* start INLINE ACCORDION - by [email protected] */
$('.accordion-label, .accordion-label + *').wrapAll("<div class='inline-accordion'></div>");
$(".accordion-label").each(function () {
    $(this).next("*").andSelf().wrapAll("<div class='item'></div>");
    $(this).append("<span class='accordion-control open'>More</span><span class='accordion-control close'>Close</span>");
});
$(".accordion-label + *").each(function () {
    $(this).wrapAll("<div class='item-info'></div>");
});
$(".accordion-label").click(function () {
    $(this).parent().toggleClass("active");
});
/* end INLINE ACCORDION */