Универсальный Скрипт-спойлер

<div class="bordo">
   <div class="big-map">
   </div>
   <div class="big-two-sity">
    <div class="two-sity dadda clearfix">
        <div class="dodka">
            <span>Екатеринбург</span>
            <div class="pod activemap">
                Карта ЕКБ
            </div>
        </div>
        <div class="dodka">
           <span>Челябинск</span>
            <div class="pod">
                Карта ЧЕЛ
            </div>
        </div>
    </div>
    <div class="two-sity clearfix">
        <div class="dodka">
            <span>Нижневартовск</span>
            <div class="pod">
                Карта НИЖ
            </div>
        </div>
        <div class="dodka">
           <span>Курган</span>
            <div class="pod">
                Карта Кург
            </div>
        </div>
    </div>
    <div class="two-sity clearfix">
        <div class="dodka">
            <span>Смоленск</span>
            <div class="pod">
                Карта СМОЛ
            </div>
        </div>
        <div class="dodka">
           <span>Москва</span>
            <div class="pod">
                Карта МОС
            </div>
        </div>
    </div>
    </div>
</div>
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
.two-sity {
    width: 500px;
    position: relative;
    list-style: none;
    background: #acacac;
    float: left;
    margin: 0;
    padding: 0;
}
.two-sity > .dodka {
/*    position: relative;*/
    float: left;
    width: 50%;
    background: green;
    list-style: none;
    margin: 0;
    padding: 0;
}
.dodka > .pod {
    position: absolute;
    display: none;
    background: red;
    list-style: none;
    margin: 0;
    padding: 0;
    left: 0;
    width: 100%;
    height: 30px;
}
.big-map {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 300px;
    float: left;
    background: yellow;
}
.bordo {
    position: relative;
}
.dodka > .pod.activemap {
    display: block;
}
.dadda {
    margin-bottom: 30px;
}
@media (min-width: 1024px) {
    .two-sity {
        position: inherit;
    }
    .dodka > .pod {
        max-width: 500px;
        top: 0;
    }
    .dadda {
        margin-bottom: 0;
    }
}
@media (max-width: 500px) {
    .two-sity > .dodka {
        font-weight: normal;
        width: 100%;
    }
    .dodka > .pod {
        position: relative;
    }
}
$(".two-sity .dodka").addClass("first");
$('.first').click(function(event) {
//    if ($(event.target).parents(".dodka").length) {
//      return;
//    }
    var $thisPod = $(event.target).parent('.first').children('.pod');
    $('.first .pod').not($thisPod).removeClass( "activemap" );
    $thisPod.addClass( "activemap" );
    event.preventDefault();
//    Добавить класс родителю
    var $thisDadda = $(event.target).parents('.two-sity');
    $('.two-sity').not($thisDadda).removeClass( "dadda" );
    $thisDadda.addClass( "dadda" );
    event.preventDefault();
});

https://jsfiddle.net/5gsrc0bk/

По клику на зеленый блок с названием города, под ним открывается красное поле с картой (карта будет в последствии, в примере нет, это не важно).

Все работает как надо, кроме - если кликнуть на зеленое поле ВНЕ названия города, которое лежит в span, то красная область, где должна лежать карта, закрывается.

А так же, если в блоке с картой кликнуть на текст в span, тоже происходит закрытие.

И я не могу понять, как правильно пропсать функцию, что бы закрытие происходило только по клику на зеленый блок с названием города, а так же по любым его потомкам, и никуда иначе.

Понимаю, что проблема в определении родственности в в функции, но не могу правильно переделать.