jQuery addClass example

Change class name on click in jQuery

HTML

<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>

CSS

.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;
    }
    
}

JavaScript

$(".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();
    
});