Sanjeev K Sanjeev K - 4 months ago 7
jQuery Question

Show/Hide div on each link click - how to optimize the code?

I have created code to show/hide multiple

<div>
elements when clicking on text. When you click on text at the top, it shows the associated
<div>
below and hides the others.

How can I optimize this with fewer lines of code?



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





View on JSFiddle

Answer

try this(fiddle

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