Показать/скрыть div на каждом клике - как оптимизировать код?

Question

Я создал код, чтобы показать/скрыть несколько элементов <div> при нажатии на текст. Когда вы нажимаете на текст вверху, он показывает связанный <div> ниже и скрывает остальные.

Как я могу оптимизировать это с меньшим количеством строк кода?

//-- flag section 
 
$('.contact-div #uk').click(function() { 
 
    $('.contact-div .china').hide(); 
 
    $('.contact-div .uk').show(); 
 
    $('.contact-div .india').hide(); 
 
    $('.contact-div .malta').hide(); 
 

 
    //-- flag images 
 
    $('#uk').addClass('scaleimg'); 
 
    $('#china').removeClass('scaleimg'); 
 
    $('#india').removeClass('scaleimg'); 
 
    $('#malta').removeClass('scaleimg'); 
 
}); 
 

 
$('.contact-div #china').click(function() { 
 
    $('.contact-div .china').show(); 
 
    $('.contact-div .uk').hide(); 
 
    $('.contact-div .india').hide(); 
 
    $('.contact-div .malta').hide(); 
 

 
    //-- flag images 
 
    $('#uk').removeClass('scaleimg'); 
 
    $('#china').addClass('scaleimg'); 
 
    $('#india').removeClass('scaleimg'); 
 
    $('#malta').removeClass('scaleimg'); 
 
}); 
 

 
$('.contact-div #india').click(function() { 
 
    $('.contact-div .china').hide(); 
 
    $('.contact-div .uk').hide(); 
 
    $('.contact-div .india').show(); 
 
    $('.contact-div .malta').hide(); 
 

 
    //-- flag images 
 
    $('#uk').removeClass('scaleimg'); 
 
    $('#china').removeClass('scaleimg'); 
 
    $('#india').addClass('scaleimg'); 
 
    $('#malta').removeClass('scaleimg'); 
 
}); 
 

 
$('.contact-div #malta').click(function() { 
 
    $('.contact-div .china').hide(); 
 
    $('.contact-div .uk').hide(); 
 
    $('.contact-div .india').hide(); 
 
    $('.contact-div .malta').show(); 
 

 
    //-- flag images 
 
    $('#uk').removeClass('scaleimg'); 
 
    $('#china').removeClass('scaleimg'); 
 
    $('#india').removeClass('scaleimg'); 
 
    $('#malta').addClass('scaleimg'); 
 

 
});

.contact-div { 
 
    float: left; 
 
    margin: 16px 0 0; 
 
    padding: 0; 
 
} 
 
.contact-div .flag { 
 
    margin: 0 0 10px; 
 
} 
 
.contact-div .flag span { 
 
    margin-left: 5px; 
 
} 
 
.cont-address { 
 
    margin-left: 23px; 
 
} 
 
.cont-address ul li { 
 
    line-height: 24px; 
 
    color: #000000; 
 
    margin-bottom: 15px; 
 
} 
 
.cont-address ul li i:before { 
 
    margin: 15px 0 0 -20px; 
 
    font-size: 20px; 
 
} 
 
.china, 
 
.india, 
 
.malta { 
 
    display: none; 
 
} 
 
.scaleimg img { 
 
    -webkit-transform: scale(1.19); 
 
    -moz-transform: scale(1.19); 
 
    -o-transform: scale(1.19); 
 
    transform: scale(1.19); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="contact-div"> 
 
    <div class="flag"> 
 
    <span id="uk" class="scaleimg">UK</span> 
 
    <span id="china">China</span> 
 
    <span id="india">India</span> 
 
    <span id="malta">Malta</span> 
 
    </div> 
 
    <div class="cont-address"> 
 
    <ul class="uk"> 
 
     <li><i class="fa fa-map-marker"></i> UK, 
 
     <br>Address of UK 
 
     </li> 
 
    </ul> 
 
    <ul class="china"> 
 
     <li><i class="fa fa-map-marker"></i> China, 
 
     <br>Address of China 
 
     </li> 
 
    </ul> 
 
    <ul class="india"> 
 
     <li><i class="fa fa-map-marker"></i> India 
 
     <br>Address of India</li> 
 
    </ul> 
 
    <ul class="malta"> 
 
     <li><i class="fa fa-map-marker"></i> Malta, 
 
     <br>Address of Malta</li> 
 
    </ul> 
 
    </div> 
 

 
</div>

Посмотреть на JSFiddle

Answer 1

Вы можете сделать это следующим образом:

https://jsfiddle.net/x45gqmmu/15/

$('.contact-div .flag > span').click(function() { 
    var id = $(this).attr("id"); 

    $('.contact-div .cont-address > ul').hide(); 
    $('.contact-div .' + id).show(); 

    $(".scaleimg").removeClass("scaleimg"); 
    $('#' + id).addClass('scaleimg'); 

}); 

Answer 2

попробовать this(fiddle

$('.flag span').click(function(){ 
    $('.cont-address ul').hide(); 
    $('.'+$(this).attr('id')).show(); 
}) 

Answer 3

Мое предложение основано на:

• :not selector
• http://api.jquery.com/toggleClass/

$(function() { 
 
    $('.contact-div .flag span').click(function() { 
 
    $('.contact-div ul:not(.' + this.id + ')').hide(); 
 
    $('.contact-div ul.' + this.id).show(); 
 

 
    $('div.flag span').toggleClass('scaleimg') 
 
    }); 
 
});

.contact-div{float: left; margin:16px 0 0; padding: 0;} 
 
.contact-div .flag{margin: 0 0 10px;} 
 
.contact-div .flag span{margin-left: 5px;} 
 
.cont-address{margin-left: 23px;} 
 
.cont-address ul li{line-height: 24px; color: #000000; margin-bottom: 15px;} 
 
.cont-address ul li i:before{margin:15px 0 0 -20px; font-size: 20px;} 
 

 
.china, .india, .malta{display:none;} 
 
.scaleimg img{ 
 
    -webkit-transform: scale(1.19); 
 
    -moz-transform: scale(1.19); 
 
    -o-transform: scale(1.19); 
 
    transform: scale(1.19); 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<div class="contact-div"> 
 
    <div class="flag"> 
 
     <span id="uk" class="scaleimg">UK</span> 
 
     <span id="china">China</span> 
 
     <span id="india">India</span> 
 
     <span id="malta">Malta</span> 
 
    </div> 
 
    <div class="cont-address"> 
 
     <ul class="uk"> 
 
      <li><i class="fa fa-map-marker"></i> UK, <br> 
 
       Address of UK 
 
      </li> 
 
     </ul> 
 
     <ul class="china"> 
 
      <li><i class="fa fa-map-marker"></i> China, <br> 
 
       Address of China 
 
      </li> 
 
     </ul> 
 
     <ul class="india"> 
 
      <li><i class="fa fa-map-marker"></i> India <br> 
 
       Address of India</li> 
 
     </ul> 
 
     <ul class="malta"> 
 
      <li><i class="fa fa-map-marker"></i> Malta, <br> 
 
       Address of Malta</li> 
 
     </ul> 
 
    </div> 
 

 
</div>

Answer 4

Вы можете достичь этого с помощью одного слушателя событий JavaScript с некоторыми изменениями атрибутов в вашем HTML (хотя, это может также быть выполнено без этого) и редактирования одного из ваших правил CSS, выделено ниже:

var current=document.querySelector(".cont-address>.show"), 
 
    flags=document.querySelector(".flag"), 
 
    country; 
 
flags.addEventListener("click",function(evt){ 
 
    var target=event.target; 
 
    if(country=target.dataset.country) 
 
     if(country=document.getElementById(country)){ 
 
      current.classList.remove("show"); 
 
      country.classList.add("show"); 
 
      current=country; 
 
     } 
 
},0);

.contact-div{ 
 
    float:left; 
 
    margin:16px 0 0; 
 
    padding:0; 
 
} 
 
.contact-div>.flag{ 
 
    margin:0 0 10px; 
 
} 
 
.contact-div>.flag>span { 
 
    margin-left:5px; 
 
} 
 
.cont-address{ 
 
    margin-left:23px; 
 
} 
 
.cont-address>ul:not(.show){/* changed selector from ".china,.india,.malta" */ 
 
    display:none; 
 
} 
 
.cont-address>ul>li{ 
 
    line-height:24px; 
 
    color: #000000; 
 
    margin-bottom: 15px; 
 
}

<div class="contact-div"> 
 
    <div class="flag"> 
 
     <span data-country="uk">UK</span> 
 
     <span data-country="china">China</span> 
 
     <span data-country="india">India</span> 
 
     <span data-country="malta">Malta</span> 
 
    </div> 
 
    <div class="cont-address"> 
 
     <ul class="show" id="uk"><li>UK,<br>Address of UK</li></ul> 
 
     <ul id="china"><li>China,<br>Address of China</li></ul> 
 
     <ul id="india"><li>India,<br>Address of India</li></ul> 
 
     <ul id="malta"><li>Malta,<br>Address of Malta</li></ul> 
 
    </div> 
 
</div>