JSFiddle - React, Tailwind, and code Playground

Expanding List Items

by Jennifer Perrin

HTML

<div class="example-row">
    <div class="example example-five">
        <ul>
            <li>...</li>
            <li>...</li>
            <li class="ex-five-button"> <span class="title">List Summary 1</span>

                <div class="details">
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
                </div>
            </li>
            <li class="ex-five-button"> <span class="title">List Summary 2</span>

                <div class="details">
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                </div>
            </li>
            <li>...</li>
            <li>...</li>
        </ul>
    </div>
    <!-- end example 5 -->
    <div class="example example-six">
        <ul class="example-six-list">
            <li>...</li>
            <li>...</li>
            <li>...</li>
            <li class="ex-six-button"> <span class="title">List Summary 1</span>

                <div class="details">
                    <p>List Summary 1: Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada...

CSS

* {
    box-sizing: border-box;
}
body {
    font: 12px/1.4"Lucida Grande", Sans-Serif;
}
.example-row {
    overflow: hidden;
    margin-bottom: 50px;
}
.example {
    width: 50%;
    float: left;
    padding: 0 30px;
}
ul {
    list-style: none;
}
li {
    background: #e6e6e6;
    padding: 0 10px;
    overflow: hidden;
    margin-bottom: 2px;
    line-height: 2.5;
}


.example-five .details {
    display: none;
    line-height: 1.4;
    padding-bottom: 10px;
}
.ex-five-button {
    transition: background 0.2s ease;
}
.ex-five-button.open {
    background: #a8ffd5;
}
.ex-five-button.open .title {
    font-weight: bold;
}
.example-six .details {
    display: none;
    line-height: 1.4;
    padding-bottom: 10px;
}
.ex-six-button {
    position: relative;
    transition: transform 0.2s ease;
}
.ex-six-button.open {
    background: #a8ffd5;
    padding: 20px;
    transform: translateY(-60px) scale(2.8);
}
.example-six-list {
    transition: transform 0.2s ease;
}
.example-six-list.open {
    transform: translateY(-40px) scale(0.4);
}
.example-six-list.open .title {
    font-weight: bold;
    font-size: 120%;
}
.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-weight: bold;
    color: black;
    text-decoration: none;
    font-size: 25px;
    line-height: 1;
    display: none;
}
.ex-six-button.open .close-button {
    display: block;
}

JavaScript

$(".ex-five-button").on("click", function () {
    $(this)
        .toggleClass("open")
        .find(".details")
        .slideToggle();
});

$(".ex-six-button").on("click", function () {
    $(".example-six-list").toggleClass("open");
    $(this)
        .toggleClass("open")
        .find(".details")
        .slideToggle();
});