JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<div class="field-name-field-event-date">
    <div class="field-items">
        <div class="field-item even"><span class="date-display-single">Tuesday, July 7, 2015 - <span class="date-display-start" property="dc:date" datatype="xsd:dateTime" content="2015-07-07T10:00:00+01:00">10:00</span> to <span class="date-display-end" property="dc:date" datatype="xsd:dateTime" content="2015-07-07T12:30:00+01:00">12:30</span></span>
        </div>
        <div class="field-item odd"><span class="date-display-single">Tuesday, July 14, 2015 - <span class="date-display-start" property="dc:date" datatype="xsd:dateTime" content="2015-07-14T10:00:00+01:00">10:00</span> to <span class="date-display-end" property="dc:date" datatype="xsd:dateTime" content="2015-07-14T12:30:00+01:00">12:30</span></span>
        </div>
        <div class="field-item even"><span class="date-display-single">Tuesday, July 21, 2015 - <span class="date-display-start" property="dc:date" datatype="xsd:dateTime" content="2015-07-21T10:00:00+01:00">10:00</span> to <span class="date-display-end" property="dc:date" datatype="xsd:dateTime" content="2015-07-21T12:30:00+01:00">12:30</span></span>
        </div>
        <div class="field-item odd"><span class="date-display-single">Tuesday, July 28, 2015 - <span class="date-display-start" property="dc:date" datatype="xsd:dateTime" content="2015-07-28T10:00:00+01:00">10:00</span> to <span class="date-display-end" property="dc:date" datatype="xsd:dateTime" content="2015-07-28T12:30:00+01:00">12:30</span></span>
        </div>
        <div class="field-item even"><span class="date-display-single">Tuesday, August 4, 2015 - <span class="date-display-start" property="dc:date" datatype="xsd:dateTime" content="2015-08-04T10:00:00+01:00">10:00</span> to <span class="date-display-end" property="dc:date" datatype="xsd:dateTime" content="2015-08-04T12:30:00+01:00">12:30</span></span>
        </div>
        <div class="field-item odd"><span class="date-display-single">Tuesday,...

CSS

.field-name-field-event-date .field-items {
    display:none;
}
.next-date {
    display:inline-block;
}
.view-all-dates {
    display:inline-block;
    cursor:pointer;
}
.extra-dates-wrapper {
    display:none;
}
.view-extra-dates-wrapper {
    display:block !important;
}

JavaScript

jQuery(function ($) {

    var allDates = [];
    var cur = new Date();
    var d;
    var first = true;

    $('.field-name-field-event-date .field-item').each(function () {
        allDates.push($(this).text());
    });

    for (var i in allDates) {
        var str = allDates[i];
        var splitStr = str.substring(0, (str.indexOf("-")) - 1);
        d = new Date(splitStr);

        if (d > cur) {
            if (first) {
                allDates[i] = "<div class='next-date'>" + allDates[i] + "</div> <div class='view-all-dates'>(See more dates)</div><div class='extra-dates-wrapper'></div>";
                $('.field-items').after(allDates[i]);
            } else {
                allDates[i] = "<div class='extra-dates'>" + allDates[i] + "</div>";
                $('.extra-dates-wrapper').append(allDates[i]);
            }
            first = false;
        }
    }

    var open = false;

    $('.view-all-dates').click(function () {
        if (!open) {
            $('.extra-dates-wrapper').addClass('view-extra-dates-wrapper');
            open = true;
        } else {
            $('.extra-dates-wrapper').removeClass('view-extra-dates-wrapper');
            open = false;
        }
    });

});