JSFiddle - React, Tailwind, and code Playground

by baacke

HTML

<ul class="package">
    <li class="package-header border">Economy Protection</li>
    <li class="border">
        Includes all vehicles<br>
        $109.99<br>
        per month<br>
        <button>Select</button>
    </li>
        
    <li class="group expanded overlay" data-compareTo="allVehicles">
        <div class="group-header">
            <span class="expand-collapse"></span>
            <span class="vert-middle">Policy Coverages All Vehicles</span>
        </div>
        <ul class="coverages">
            <li class="label">Label</li>
            <li class="value">Value</li>
            
            <li class="label">Label</li>
            <li class="value">Value</li>
            
            <li class="label">Label</li>
            <li class="value">Value</li>
            
            <li class="label">Label</li>
            <li class="value">Value</li>
            
            <li class="label">Label</li>
            <li class="value">Value</li>
        </ul>
    </li>
    <li class="group collapsed overlay" data-compareTo="vehicle1">
        <div class="group-header">
            <span class="expand-collapse"></span>
            <span class="vert-middle">Vehicle 1</span>
        </div>
        <ul class="coverages">
            <li class="label">Label</li>
            <li class="value">Value</li>
            
            <li class="label">Label</li>
            <li class="value">Value</li>
            
            <li class="label">Label</li>
            <li class="value">Value</li>
            
            <li class="label">Label</li>
            <li class="value">Value</li>
            
            <li class="label">Label</li>
            <li class="value">Value</li>
        </ul>
    </li>
    <li class="group collapsed overlay" data-compareTo="vehicle2">
        <div class="group-header">
            <span class="expand-collapse"></span>
            <span class="vert-middle">Vehicle 2</span>
        </div>
        <ul class="coverages">
          ...

CSS

* {transition: max-height .3s linear}

.border {border: 1px solid #000}

.package {border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    margin: 0 10px;
    padding: 0;
    width: 28%;
    list-style-type: none;
    display: inline-block;
    text-align: center;
    vertical-align: top}

button {text-transform: uppercase;
    margin: 5px auto;
    cursor: pointer}

.package-header {text-transform: uppercase;
    margin-bottom: -1px}

.group {margin-top: 20px}

.single-line-title {margin-top: 7px;
    padding-bottom: 11px;
    display: inline-block;}

.expand-collapse {display: inline-block;
    border: 1px solid #000;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    float: left;
    margin-top: 6px;
    margin-right: 10px}

.collapsed .expand-collapse:before {content: "+";
    position: relative;
    top: 3px}

.expanded .expand-collapse:before {content: "-";
    position: relative;
    top: 3px}

.collapsed .coverages {max-height: 0;
    opacity: 0}

.expanded .coverages {max-height: 500px;
    opacity: 1}

.coverages {margin: -1px 0 0;
    padding: 0;
    list-style-type: none;
    text-align: left}

.coverages > li {padding: 4px;
    border: 1px solid #000;
    margin-bottom: -1px}

.coverages > li:last-of-type {margin-bottom: -6px}

.coverages > li.label {background-color: #efefef}

.group-header {height: 40px;
    padding: 5%;
    width: 90%;
    border: 1px solid #000;
    display: table}

.vert-middle {display: table-cell;
    vertical-align: middle;
    width: 100%}

.package:first-of-type .group-header {width: 300%;
    background-color: #fff;
    position: relative;
    z-index: 99;
    padding-right: 30px}

.package:first-of-type .label {width: 300%;
    position: relative;
    z-index: 99;
    padding-right: 42px}

.value {text-align: center}

@media (max-width: 750px) {
    .package {display: block;
        width: 90%;
        margin-bottom: 20px}
    
    .package:first-of-type .group-header {width: inherit}
}

JavaScript

$('.group-header').click(function(){
    var parent = $(this).parent();
    
    if ( parent.hasClass('collapsed') ){ //if currently collapsed
        $('.group[data-compareto="' + parent.data('compareto') + '"]').add(parent).addClass('expanded').removeClass('collapsed'); //then expand
    }else{ //if currently expanded
        $('.group[data-compareto="' + parent.data('compareto') + '"]').add(parent).addClass('collapsed').removeClass('expanded'); //then collapse
    }
});

console.log( $('.package:first-of-type').length );