JSFiddle - React, Tailwind, and code Playground

by davidhong

HTML

<dl class="locations">
    <dt>NSW</dt>
    <dd>
        <dl>
            <dt>Bondi Junction</dt>
            <dd>
                <dl>
                    <dt>Bronte Rd</dt>
                    <dd>
                        <p>1 Address St</p>
                        <p>T: 02 9999 1111</p>
                        <a href="#">View map</a>
                    </dd>
                    <dt>Bronte Rd</dt>
                    <dd>
                        <p>1 Address St</p>
                        <p>T: 02 9999 1111</p>
                        <a href="#">View map</a>
                    </dd>
                </dl>
            </dd>
            <dt>Bronte Rd</dt>
            <dd>
                <p>1 Address St</p>
                <p>T: 02 9999 1111</p>
                <a href="#">View map</a>
            </dd>
            <dt>Bronte Rd</dt>
            <dd>
                <p>1 Address St</p>
                <p>T: 02 9999 1111</p>
                <a href="#">View map</a>
            </dd>
        </dl>
    </dd>
    <dt>NSW</dt>
    <dd>
        <dl>
            <dt>Bondi Junction</dt>
            <dd>
                <dl>
                    <dt>Bronte Rd</dt>
                    <dd>
                        <p>1 Address St</p>
                        <p>T: 02 9999 1111</p>
                        <a href="#">View map</a>
                    </dd>
                    <dt>Bronte Rd</dt>
                    <dd>
                        <p>1 Address St</p>
                        <p>T: 02 9999 1111</p>
                        <a href="#">View map</a>
                    </dd>
                </dl>
            </dd>
            <dt>Bronte Rd</dt>
            <dd>
                <p>1 Address St</p>
                <p>T: 02 9999 1111</p>
                <a href="#">View map</a>
            </dd>
            <dt>Bronte Rd</dt>
            <dd>
                <p>1 Address St</p>
                <p>T: 02 9999 1111</p>
                <a href="#">View map</a>
           ...

CSS

/* Layout */
dt { padding: 5px; }
dd { padding: 5px; display: none; }

/* Styles */
dt { cursor: pointer; }
.active { font-weight: 800; }

/* Typography */
dt { text-transform: uppercase; }

JavaScript

$('.locations').delegate('dt', 'click', function() {
    var $this = $(this);
    var $target = $this.next('dd');
    var active = $this.hasClass('active');

    if (!active) {
        // Deselect previous triggers (bold text)
        $this
            .siblings('dt , dd').removeClass('active')
            .find('dt').removeClass('active');
        
        // Hide previous targets
        $this
            .siblings('dd').slideUp()
            .find('dd').slideUp();

        // Show the current target
        $target.slideDown(function() {
            $this.addClass('active');
        });
    }
});