Toggle image(flag's) in language panel
Toggle image(flag's) in language panel
I have a language panel in which I have one image (main-image) that show's when the page is loaded. I also have three additional image's which are hidden when the page loads.
image
main-image
image's
The question is how to toggle main image when one of the additional image's is clicked. I need to toggle main-image with the image which is clicked.
image's
image
Here is Codepen
My first try
let menuBtn = document.getElementById("menu-btn");
menuBtn.addEventListener("click", ()=>{
let mainBtnImg = document.getElementById("main-btn-img");
let otherThreeImg = document.querySelectorAll(".menu-img");
for(let i = 0;i< otherThreeImg.length; i++){
mainBtnImg.src = otherThreeImg[this].src;
}
})
Second try
changed this part only
mainBtnImg.src = this.otherThreeImg;
Downvoters please comment first
$(document).on('click', function (e) {
if ($(e.target).closest(".menu-btn").length === 0) {
$('.menu-nav').removeClass('menu-nav--open');
}
});
$('.menu-btn').on('click', function(e){
e.preventDefault();
$(this).toggleClass('menu-btn--open');
$('.menu-nav').toggleClass('menu-nav--open');
});
body, html {
margin: 0;
}
.section {
width: 100%;
height: 100vh;
background: linear-gradient(#55efc4, #ffeaa7);
position: relative;
}
.menu-btn__wrapper {
position: absolute;
top: 20px;
right: 20px;
}
.menu-btn {
width: 50px;
height: 50px;
display: block;
background-color: #fff;
border-radius: 50%;
position: relative;
}
.menu-block {
display: flex;
flex-direction: column-reverse;
}
.menu-nav {
display: flex;
flex-direction: column;
align-items: center;
transition: .5s;
transform-origin: top center;
transform: scaleY(0) translateY(-20px);
opacity: 0;
}
.menu-nav.with-border {
background-color: #fff;
padding-bottom: 20px;
padding-top: 30px;
margin-top: -40px;
border-radius: 50px;
}
.menu-nav--open {
transform: scaleY(1) translateY(0);
opacity: 1;
}
.menu-nav__name {
position: absolute;
right: 45px;
top: 0;
margin: 0;
opacity: 0;
transition: .3s;
}
.menu-nav__name img {
idth: 30px;
height: 30px;
border-radius: 50%;
}
.menu-nav__link {
display: inline-block;
color: #000;
margin-top: 5px;
transition: .4s;
position: relative;
}
.menu-nav__img {
width: 30px;
height: 30px;
display: flex;
justify-content: center;
margin-left: auto;
margin-right: auto;
padding-top: 20%;
}
You need to add onclick event on each menu item and replace the src of the main image with the clicked one.https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
</div>
</div>
1 Answer
1
$(document).on('click', function (e) {
if ($(e.target).closest(".menu-btn").length === 0) {
$('.menu-nav').removeClass('menu-nav--open');
}
});
$('.menu-btn').on('click', function(e){
e.preventDefault();
$(this).toggleClass('menu-btn--open');
$('.menu-nav').toggleClass('menu-nav--open');
});
$('.menu-nav__link').on('click', function(e){
$("#main-btn-img").attr('src', $(this).find('img').attr('src'));
});body, html {
margin: 0;
}
.section {
width: 100%;
height: 100vh;
background: linear-gradient(#55efc4, #ffeaa7);
position: relative;
}
.menu-btn__wrapper {
position: absolute;
top: 20px;
right: 20px;
}
.menu-btn {
width: 50px;
height: 50px;
display: block;
background-color: #fff;
border-radius: 50%;
position: relative;
}
.menu-block {
display: flex;
flex-direction: column-reverse;
}
.menu-nav {
display: flex;
flex-direction: column;
align-items: center;
transition: .5s;
transform-origin: top center;
transform: scaleY(0) translateY(-20px);
opacity: 0;
}
.menu-nav.with-border {
background-color: #fff;
padding-bottom: 20px;
padding-top: 30px;
margin-top: -40px;
border-radius: 50px;
}
.menu-nav--open {
transform: scaleY(1) translateY(0);
opacity: 1;
}
.menu-nav__name {
position: absolute;
right: 45px;
top: 0;
margin: 0;
opacity: 0;
transition: .3s;
}
.menu-nav__name img {
idth: 30px;
height: 30px;
border-radius: 50%;
}
.menu-nav__link {
display: inline-block;
color: #000;
margin-top: 5px;
transition: .4s;
position: relative;
}
.menu-nav__img {
width: 30px;
height: 30px;
display: flex;
justify-content: center;
margin-left: auto;
margin-right: auto;
padding-top: 20%;
}https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
